commit 81bc58ef53bd9f1ef88aacf26ea3f73abeb62f5d
Author: unknown <1535852499@qq.com>
Date:   Thu Nov 30 15:40:06 2023 +0800

    zyh

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..403adbc
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.history/src/assets/function_20231129160221.js b/.history/src/assets/function_20231129160221.js
new file mode 100644
index 0000000..113190c
--- /dev/null
+++ b/.history/src/assets/function_20231129160221.js
@@ -0,0 +1,9 @@
+export let fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
diff --git a/.history/src/assets/function_20231130084910.js b/.history/src/assets/function_20231130084910.js
new file mode 100644
index 0000000..0cc587a
--- /dev/null
+++ b/.history/src/assets/function_20231130084910.js
@@ -0,0 +1,9 @@
+export const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
diff --git a/.history/src/assets/function_20231130085058.js b/.history/src/assets/function_20231130085058.js
new file mode 100644
index 0000000..0cc587a
--- /dev/null
+++ b/.history/src/assets/function_20231130085058.js
@@ -0,0 +1,9 @@
+export const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
diff --git a/.history/src/main_20231129153447.js b/.history/src/main_20231129153447.js
new file mode 100644
index 0000000..31e931e
--- /dev/null
+++ b/.history/src/main_20231129153447.js
@@ -0,0 +1,20 @@
+import Vue from "vue";
+import App from "./App.vue";
+import "./registerServiceWorker";
+import router from "./router";
+import store from "./store";
+
+// 全局引入Echarts;
+import * as echarts from "echarts";
+// 然后挂载在vue原型上;
+import "echarts-gl";
+Vue.prototype.$echarts = echarts;
+Vue.config.productionTip = false;
+
+import "amfe-flexible";
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount("#app");
diff --git a/.history/src/main_20231130083953.js b/.history/src/main_20231130083953.js
new file mode 100644
index 0000000..29127e9
--- /dev/null
+++ b/.history/src/main_20231130083953.js
@@ -0,0 +1,18 @@
+import Vue from "vue";
+import App from "./App.vue";
+import "./registerServiceWorker";
+import router from "./router";
+import store from "./store";
+import "amfe-flexible";
+// 全局引入Echarts;
+import * as echarts from "echarts";
+// 然后挂载在vue原型上;
+import "echarts-gl";
+Vue.prototype.$echarts = echarts;
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount("#app");
diff --git a/.history/src/main_20231130083954.js b/.history/src/main_20231130083954.js
new file mode 100644
index 0000000..29127e9
--- /dev/null
+++ b/.history/src/main_20231130083954.js
@@ -0,0 +1,18 @@
+import Vue from "vue";
+import App from "./App.vue";
+import "./registerServiceWorker";
+import router from "./router";
+import store from "./store";
+import "amfe-flexible";
+// 全局引入Echarts;
+import * as echarts from "echarts";
+// 然后挂载在vue原型上;
+import "echarts-gl";
+Vue.prototype.$echarts = echarts;
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount("#app");
diff --git a/.history/src/main_20231130091259.js b/.history/src/main_20231130091259.js
new file mode 100644
index 0000000..be94ecd
--- /dev/null
+++ b/.history/src/main_20231130091259.js
@@ -0,0 +1,40 @@
+import Vue from "vue";
+import App from "./App.vue";
+import "./registerServiceWorker";
+import router from "./router";
+import store from "./store";
+import "amfe-flexible";
+// 全局引入Echarts;
+import * as echarts from "echarts";
+// 然后挂载在vue原型上;
+import "echarts-gl";
+Vue.prototype.$echarts = echarts;
+Vue.config.productionTip = false;
+// echarts 页面适配    ====↓↓↓↓↓↓↓↓↓↓========
+// 定义全局指令
+Vue.directive('resize', { // 使用局部注册指令的方式
+  // 指令的名称
+  bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
+    let width = '',
+      height = '';
+
+    function isReize() {
+      const style = document.defaultView.getComputedStyle(el);
+      if (width !== style.width || height !== style.height) {
+        binding.value(); // 关键
+      }
+      width = style.width;
+      height = style.height;
+    }
+    el.__vueSetInterval__ = setInterval(isReize, 300);
+  },
+  unbind(el) {
+    clearInterval(el.__vueSetInterval__);
+  }
+
+})
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount("#app");
diff --git a/.history/src/router/index_20231129153629.js b/.history/src/router/index_20231129153629.js
new file mode 100644
index 0000000..6376599
--- /dev/null
+++ b/.history/src/router/index_20231129153629.js
@@ -0,0 +1,19 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("../views/KHC.vue"),
+  },
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;
diff --git a/.history/src/router/index_20231130083318.js b/.history/src/router/index_20231130083318.js
new file mode 100644
index 0000000..47fce3f
--- /dev/null
+++ b/.history/src/router/index_20231130083318.js
@@ -0,0 +1,24 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("../views/KHC.vue"),
+  },
+  {
+    path: "/tan",
+    name: "tan",
+    component: () => import("../views/TAN.vue"),
+  },
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;
diff --git a/.history/src/router/index_20231130150159.js b/.history/src/router/index_20231130150159.js
new file mode 100644
index 0000000..94e9993
--- /dev/null
+++ b/.history/src/router/index_20231130150159.js
@@ -0,0 +1,29 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("../views/KHC.vue"),
+  },
+  {
+    path: "/tan",
+    name: "tan",
+    component: () => import("../views/TAN.vue"),
+  },
+  {
+    path: "/tan",
+    name: "tan",
+    component: () => import("../views/TAN.vue"),
+  },
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;
diff --git a/.history/src/router/index_20231130150204.js b/.history/src/router/index_20231130150204.js
new file mode 100644
index 0000000..7048c8d
--- /dev/null
+++ b/.history/src/router/index_20231130150204.js
@@ -0,0 +1,29 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("../views/KHC.vue"),
+  },
+  {
+    path: "/tan",
+    name: "tan",
+    component: () => import("../views/TAN.vue"),
+  },
+  {
+    path: "/zhdy",
+    name: "tan",
+    component: () => import("../views/TAN.vue"),
+  },
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;
diff --git a/.history/src/router/index_20231130150208.js b/.history/src/router/index_20231130150208.js
new file mode 100644
index 0000000..6d8ca75
--- /dev/null
+++ b/.history/src/router/index_20231130150208.js
@@ -0,0 +1,29 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("../views/KHC.vue"),
+  },
+  {
+    path: "/tan",
+    name: "tan",
+    component: () => import("../views/TAN.vue"),
+  },
+  {
+    path: "/zhdy",
+    name: "zhdy",
+    component: () => import("../views/TAN.vue"),
+  },
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;
diff --git a/.history/src/router/index_20231130150227.js b/.history/src/router/index_20231130150227.js
new file mode 100644
index 0000000..a6425d1
--- /dev/null
+++ b/.history/src/router/index_20231130150227.js
@@ -0,0 +1,29 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("../views/KHC.vue"),
+  },
+  {
+    path: "/tan",
+    name: "tan",
+    component: () => import("../views/TAN.vue"),
+  },
+  {
+    path: "/zhdy",
+    name: "zhdy",
+    component: () => import("../views/ZHDY.vue"),
+  },
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;
diff --git a/.history/src/views/KHC_20231129182105.vue b/.history/src/views/KHC_20231129182105.vue
new file mode 100644
index 0000000..7885331
--- /dev/null
+++ b/.history/src/views/KHC_20231129182105.vue
@@ -0,0 +1,1502 @@
+<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="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </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>
+          </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="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>
+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();
+      });
+    },
+
+    //用户行业占比
+    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: "#fff",
+            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("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let getParametricEquation = function (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height
+      ) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          },
+        };
+      };
+      // 生成模拟 3D 饼图的配置项
+      let getPie3D = function (pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          console.log(series[i]);
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+        return series;
+      };
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: "楼宇",
+          value: 4256,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#2A71FF",
+          },
+        },
+
+        {
+          name: "工业",
+          value: 2356,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#00EDFE",
+          },
+        },
+        {
+          name: "其他",
+          value: 2018,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#FEDB4B",
+          },
+        },
+      ];
+      const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+      series.push({
+        name: "pie2d",
+        type: "pie",
+
+        label: {
+          show: false,
+          opacity: 1,
+          fontSize: fontSizeRem(14),
+          lineHeight: 20,
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            color: "#fff",
+          },
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["40%", "60%"],
+        //   center: ["30%", "50%"],
+        center: ["40%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      let data = [
+        {
+          name: "楼宇",
+          value: "30%",
+        },
+        {
+          name: "工业",
+          value: "30%",
+        },
+        {
+          name: "其他",
+          value: "40%",
+        },
+      ];
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          show: true,
+          tooltip: {
+            show: false,
+          },
+          orient: "vertical",
+          data: data,
+          top: "center",
+          itemGap: 14,
+          itemHeight: 8,
+          itemWidth: 17,
+          right: "2%",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(12),
+          },
+          formatter: function (name) {
+            let res = data.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return name + "    " + res.value + unit;
+          },
+        },
+        animation: false,
+        tooltip: {
+          show: false,
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              return `${
+                params.seriesName
+              }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                params.color
+              };"></span>${
+                option.series[params.seriesIndex].pieData.value + "%"
+              }`;
+            }
+          },
+          textStyle: {
+            fontSize: fontSizeRem(14),
+          },
+        },
+        title: {
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(22),
+          },
+        },
+        // backgroundColor: "#0E3567",
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+          normal: {
+            show: true,
+            length: 10,
+            length2: 10,
+          },
+        },
+        label: {
+          show: false,
+          // position: "outside",
+          // formatter: "{b} \n{d}%",
+          // textStyle: {
+          //   color: "#fff",
+          //   fontSize: "14px",
+          // },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 0.01,
+          //top: '30%',
+          bottom: "50%",
+          left: "-7%",
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 60,
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("ynflzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    .left {
+      width: 436px;
+      height: 100%;
+      .ztynqk {
+        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;
+        }
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          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;
+          }
+        }
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+            img {
+              width: 72px;
+              height: 72px;
+            }
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+      .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;
+          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%;
+      .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>
diff --git a/.history/src/views/KHC_20231130091855.vue b/.history/src/views/KHC_20231130091855.vue
new file mode 100644
index 0000000..7885331
--- /dev/null
+++ b/.history/src/views/KHC_20231130091855.vue
@@ -0,0 +1,1502 @@
+<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="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </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>
+          </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="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>
+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();
+      });
+    },
+
+    //用户行业占比
+    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: "#fff",
+            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("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let getParametricEquation = function (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height
+      ) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          },
+        };
+      };
+      // 生成模拟 3D 饼图的配置项
+      let getPie3D = function (pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          console.log(series[i]);
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+        return series;
+      };
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: "楼宇",
+          value: 4256,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#2A71FF",
+          },
+        },
+
+        {
+          name: "工业",
+          value: 2356,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#00EDFE",
+          },
+        },
+        {
+          name: "其他",
+          value: 2018,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#FEDB4B",
+          },
+        },
+      ];
+      const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+      series.push({
+        name: "pie2d",
+        type: "pie",
+
+        label: {
+          show: false,
+          opacity: 1,
+          fontSize: fontSizeRem(14),
+          lineHeight: 20,
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            color: "#fff",
+          },
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["40%", "60%"],
+        //   center: ["30%", "50%"],
+        center: ["40%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      let data = [
+        {
+          name: "楼宇",
+          value: "30%",
+        },
+        {
+          name: "工业",
+          value: "30%",
+        },
+        {
+          name: "其他",
+          value: "40%",
+        },
+      ];
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          show: true,
+          tooltip: {
+            show: false,
+          },
+          orient: "vertical",
+          data: data,
+          top: "center",
+          itemGap: 14,
+          itemHeight: 8,
+          itemWidth: 17,
+          right: "2%",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(12),
+          },
+          formatter: function (name) {
+            let res = data.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return name + "    " + res.value + unit;
+          },
+        },
+        animation: false,
+        tooltip: {
+          show: false,
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              return `${
+                params.seriesName
+              }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                params.color
+              };"></span>${
+                option.series[params.seriesIndex].pieData.value + "%"
+              }`;
+            }
+          },
+          textStyle: {
+            fontSize: fontSizeRem(14),
+          },
+        },
+        title: {
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(22),
+          },
+        },
+        // backgroundColor: "#0E3567",
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+          normal: {
+            show: true,
+            length: 10,
+            length2: 10,
+          },
+        },
+        label: {
+          show: false,
+          // position: "outside",
+          // formatter: "{b} \n{d}%",
+          // textStyle: {
+          //   color: "#fff",
+          //   fontSize: "14px",
+          // },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 0.01,
+          //top: '30%',
+          bottom: "50%",
+          left: "-7%",
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 60,
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("ynflzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    .left {
+      width: 436px;
+      height: 100%;
+      .ztynqk {
+        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;
+        }
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          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;
+          }
+        }
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+            img {
+              width: 72px;
+              height: 72px;
+            }
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+      .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;
+          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%;
+      .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>
diff --git a/.history/src/views/KHC_20231130091943.vue b/.history/src/views/KHC_20231130091943.vue
new file mode 100644
index 0000000..7885331
--- /dev/null
+++ b/.history/src/views/KHC_20231130091943.vue
@@ -0,0 +1,1502 @@
+<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="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </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>
+          </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="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>
+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();
+      });
+    },
+
+    //用户行业占比
+    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: "#fff",
+            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("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let getParametricEquation = function (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height
+      ) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          },
+        };
+      };
+      // 生成模拟 3D 饼图的配置项
+      let getPie3D = function (pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          console.log(series[i]);
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+        return series;
+      };
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: "楼宇",
+          value: 4256,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#2A71FF",
+          },
+        },
+
+        {
+          name: "工业",
+          value: 2356,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#00EDFE",
+          },
+        },
+        {
+          name: "其他",
+          value: 2018,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#FEDB4B",
+          },
+        },
+      ];
+      const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+      series.push({
+        name: "pie2d",
+        type: "pie",
+
+        label: {
+          show: false,
+          opacity: 1,
+          fontSize: fontSizeRem(14),
+          lineHeight: 20,
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            color: "#fff",
+          },
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["40%", "60%"],
+        //   center: ["30%", "50%"],
+        center: ["40%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      let data = [
+        {
+          name: "楼宇",
+          value: "30%",
+        },
+        {
+          name: "工业",
+          value: "30%",
+        },
+        {
+          name: "其他",
+          value: "40%",
+        },
+      ];
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          show: true,
+          tooltip: {
+            show: false,
+          },
+          orient: "vertical",
+          data: data,
+          top: "center",
+          itemGap: 14,
+          itemHeight: 8,
+          itemWidth: 17,
+          right: "2%",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(12),
+          },
+          formatter: function (name) {
+            let res = data.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return name + "    " + res.value + unit;
+          },
+        },
+        animation: false,
+        tooltip: {
+          show: false,
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              return `${
+                params.seriesName
+              }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                params.color
+              };"></span>${
+                option.series[params.seriesIndex].pieData.value + "%"
+              }`;
+            }
+          },
+          textStyle: {
+            fontSize: fontSizeRem(14),
+          },
+        },
+        title: {
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(22),
+          },
+        },
+        // backgroundColor: "#0E3567",
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+          normal: {
+            show: true,
+            length: 10,
+            length2: 10,
+          },
+        },
+        label: {
+          show: false,
+          // position: "outside",
+          // formatter: "{b} \n{d}%",
+          // textStyle: {
+          //   color: "#fff",
+          //   fontSize: "14px",
+          // },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 0.01,
+          //top: '30%',
+          bottom: "50%",
+          left: "-7%",
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 60,
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("ynflzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    .left {
+      width: 436px;
+      height: 100%;
+      .ztynqk {
+        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;
+        }
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+          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;
+          }
+        }
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+            img {
+              width: 72px;
+              height: 72px;
+            }
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+      .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;
+          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%;
+      .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>
diff --git a/.history/src/views/KHC_20231130092423.vue b/.history/src/views/KHC_20231130092423.vue
new file mode 100644
index 0000000..ad264d1
--- /dev/null
+++ b/.history/src/views/KHC_20231130092423.vue
@@ -0,0 +1,1545 @@
+<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="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </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>
+          </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="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();
+      });
+    },
+
+    //用户行业占比
+    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: "#fff",
+            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("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let getParametricEquation = function (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height
+      ) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          },
+        };
+      };
+      // 生成模拟 3D 饼图的配置项
+      let getPie3D = function (pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          console.log(series[i]);
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+        return series;
+      };
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: "楼宇",
+          value: 4256,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#2A71FF",
+          },
+        },
+
+        {
+          name: "工业",
+          value: 2356,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#00EDFE",
+          },
+        },
+        {
+          name: "其他",
+          value: 2018,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#FEDB4B",
+          },
+        },
+      ];
+      const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+      series.push({
+        name: "pie2d",
+        type: "pie",
+
+        label: {
+          show: false,
+          opacity: 1,
+          fontSize: fontSizeRem(14),
+          lineHeight: 20,
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            color: "#fff",
+          },
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["40%", "60%"],
+        //   center: ["30%", "50%"],
+        center: ["40%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      let data = [
+        {
+          name: "楼宇",
+          value: "30%",
+        },
+        {
+          name: "工业",
+          value: "30%",
+        },
+        {
+          name: "其他",
+          value: "40%",
+        },
+      ];
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          show: true,
+          tooltip: {
+            show: false,
+          },
+          orient: "vertical",
+          data: data,
+          top: "center",
+          itemGap: 14,
+          itemHeight: 8,
+          itemWidth: 17,
+          right: "2%",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(12),
+          },
+          formatter: function (name) {
+            let res = data.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return name + "    " + res.value + unit;
+          },
+        },
+        animation: false,
+        tooltip: {
+          show: false,
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              return `${params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                }`;
+            }
+          },
+          textStyle: {
+            fontSize: fontSizeRem(14),
+          },
+        },
+        title: {
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(22),
+          },
+        },
+        // backgroundColor: "#0E3567",
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+          normal: {
+            show: true,
+            length: 10,
+            length2: 10,
+          },
+        },
+        label: {
+          show: false,
+          // position: "outside",
+          // formatter: "{b} \n{d}%",
+          // textStyle: {
+          //   color: "#fff",
+          //   fontSize: "14px",
+          // },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 0.01,
+          //top: '30%',
+          bottom: "50%",
+          left: "-7%",
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 60,
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("ynflzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        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;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          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;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .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;
+          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%;
+
+      .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>
diff --git a/.history/src/views/KHC_20231130092424.vue b/.history/src/views/KHC_20231130092424.vue
new file mode 100644
index 0000000..ad264d1
--- /dev/null
+++ b/.history/src/views/KHC_20231130092424.vue
@@ -0,0 +1,1545 @@
+<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="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </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>
+          </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="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();
+      });
+    },
+
+    //用户行业占比
+    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: "#fff",
+            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("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let getParametricEquation = function (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height
+      ) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          },
+        };
+      };
+      // 生成模拟 3D 饼图的配置项
+      let getPie3D = function (pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          console.log(series[i]);
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+        return series;
+      };
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: "楼宇",
+          value: 4256,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#2A71FF",
+          },
+        },
+
+        {
+          name: "工业",
+          value: 2356,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#00EDFE",
+          },
+        },
+        {
+          name: "其他",
+          value: 2018,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#FEDB4B",
+          },
+        },
+      ];
+      const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+      series.push({
+        name: "pie2d",
+        type: "pie",
+
+        label: {
+          show: false,
+          opacity: 1,
+          fontSize: fontSizeRem(14),
+          lineHeight: 20,
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            color: "#fff",
+          },
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["40%", "60%"],
+        //   center: ["30%", "50%"],
+        center: ["40%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      let data = [
+        {
+          name: "楼宇",
+          value: "30%",
+        },
+        {
+          name: "工业",
+          value: "30%",
+        },
+        {
+          name: "其他",
+          value: "40%",
+        },
+      ];
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          show: true,
+          tooltip: {
+            show: false,
+          },
+          orient: "vertical",
+          data: data,
+          top: "center",
+          itemGap: 14,
+          itemHeight: 8,
+          itemWidth: 17,
+          right: "2%",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(12),
+          },
+          formatter: function (name) {
+            let res = data.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return name + "    " + res.value + unit;
+          },
+        },
+        animation: false,
+        tooltip: {
+          show: false,
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              return `${params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                }`;
+            }
+          },
+          textStyle: {
+            fontSize: fontSizeRem(14),
+          },
+        },
+        title: {
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(22),
+          },
+        },
+        // backgroundColor: "#0E3567",
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+          normal: {
+            show: true,
+            length: 10,
+            length2: 10,
+          },
+        },
+        label: {
+          show: false,
+          // position: "outside",
+          // formatter: "{b} \n{d}%",
+          // textStyle: {
+          //   color: "#fff",
+          //   fontSize: "14px",
+          // },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 0.01,
+          //top: '30%',
+          bottom: "50%",
+          left: "-7%",
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 60,
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("ynflzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        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;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          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;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .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;
+          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%;
+
+      .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>
diff --git a/.history/src/views/KHC_20231130092726.vue b/.history/src/views/KHC_20231130092726.vue
new file mode 100644
index 0000000..bf6d330
--- /dev/null
+++ b/.history/src/views/KHC_20231130092726.vue
@@ -0,0 +1,1545 @@
+<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="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </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>
+          </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="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb" v-resize="resize"></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();
+      });
+    },
+
+    //用户行业占比
+    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: "#fff",
+            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("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let getParametricEquation = function (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height
+      ) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          },
+        };
+      };
+      // 生成模拟 3D 饼图的配置项
+      let getPie3D = function (pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          console.log(series[i]);
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+        return series;
+      };
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: "楼宇",
+          value: 4256,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#2A71FF",
+          },
+        },
+
+        {
+          name: "工业",
+          value: 2356,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#00EDFE",
+          },
+        },
+        {
+          name: "其他",
+          value: 2018,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#FEDB4B",
+          },
+        },
+      ];
+      const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+      series.push({
+        name: "pie2d",
+        type: "pie",
+
+        label: {
+          show: false,
+          opacity: 1,
+          fontSize: fontSizeRem(14),
+          lineHeight: 20,
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            color: "#fff",
+          },
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["40%", "60%"],
+        //   center: ["30%", "50%"],
+        center: ["40%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      let data = [
+        {
+          name: "楼宇",
+          value: "30%",
+        },
+        {
+          name: "工业",
+          value: "30%",
+        },
+        {
+          name: "其他",
+          value: "40%",
+        },
+      ];
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          show: true,
+          tooltip: {
+            show: false,
+          },
+          orient: "vertical",
+          data: data,
+          top: "center",
+          itemGap: 14,
+          itemHeight: 8,
+          itemWidth: 17,
+          right: "2%",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(12),
+          },
+          formatter: function (name) {
+            let res = data.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return name + "    " + res.value + unit;
+          },
+        },
+        animation: false,
+        tooltip: {
+          show: false,
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              return `${params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                }`;
+            }
+          },
+          textStyle: {
+            fontSize: fontSizeRem(14),
+          },
+        },
+        title: {
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(22),
+          },
+        },
+        // backgroundColor: "#0E3567",
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+          normal: {
+            show: true,
+            length: 10,
+            length2: 10,
+          },
+        },
+        label: {
+          show: false,
+          // position: "outside",
+          // formatter: "{b} \n{d}%",
+          // textStyle: {
+          //   color: "#fff",
+          //   fontSize: "14px",
+          // },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 0.01,
+          //top: '30%',
+          bottom: "50%",
+          left: "-7%",
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 60,
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("ynflzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        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;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          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;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .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;
+          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%;
+
+      .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>
diff --git a/.history/src/views/KHC_20231130092945.vue b/.history/src/views/KHC_20231130092945.vue
new file mode 100644
index 0000000..ad264d1
--- /dev/null
+++ b/.history/src/views/KHC_20231130092945.vue
@@ -0,0 +1,1545 @@
+<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="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </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>
+          </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="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();
+      });
+    },
+
+    //用户行业占比
+    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: "#fff",
+            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("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let getParametricEquation = function (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height
+      ) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          },
+        };
+      };
+      // 生成模拟 3D 饼图的配置项
+      let getPie3D = function (pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          console.log(series[i]);
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+        return series;
+      };
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: "楼宇",
+          value: 4256,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#2A71FF",
+          },
+        },
+
+        {
+          name: "工业",
+          value: 2356,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#00EDFE",
+          },
+        },
+        {
+          name: "其他",
+          value: 2018,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#FEDB4B",
+          },
+        },
+      ];
+      const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+      series.push({
+        name: "pie2d",
+        type: "pie",
+
+        label: {
+          show: false,
+          opacity: 1,
+          fontSize: fontSizeRem(14),
+          lineHeight: 20,
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            color: "#fff",
+          },
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["40%", "60%"],
+        //   center: ["30%", "50%"],
+        center: ["40%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      let data = [
+        {
+          name: "楼宇",
+          value: "30%",
+        },
+        {
+          name: "工业",
+          value: "30%",
+        },
+        {
+          name: "其他",
+          value: "40%",
+        },
+      ];
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          show: true,
+          tooltip: {
+            show: false,
+          },
+          orient: "vertical",
+          data: data,
+          top: "center",
+          itemGap: 14,
+          itemHeight: 8,
+          itemWidth: 17,
+          right: "2%",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(12),
+          },
+          formatter: function (name) {
+            let res = data.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return name + "    " + res.value + unit;
+          },
+        },
+        animation: false,
+        tooltip: {
+          show: false,
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              return `${params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                }`;
+            }
+          },
+          textStyle: {
+            fontSize: fontSizeRem(14),
+          },
+        },
+        title: {
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(22),
+          },
+        },
+        // backgroundColor: "#0E3567",
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+          normal: {
+            show: true,
+            length: 10,
+            length2: 10,
+          },
+        },
+        label: {
+          show: false,
+          // position: "outside",
+          // formatter: "{b} \n{d}%",
+          // textStyle: {
+          //   color: "#fff",
+          //   fontSize: "14px",
+          // },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 0.01,
+          //top: '30%',
+          bottom: "50%",
+          left: "-7%",
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 60,
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("ynflzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        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;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          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;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .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;
+          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%;
+
+      .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>
diff --git a/.history/src/views/KHC_20231130093047.vue b/.history/src/views/KHC_20231130093047.vue
new file mode 100644
index 0000000..ad264d1
--- /dev/null
+++ b/.history/src/views/KHC_20231130093047.vue
@@ -0,0 +1,1545 @@
+<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="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </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>
+          </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="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();
+      });
+    },
+
+    //用户行业占比
+    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: "#fff",
+            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("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let getParametricEquation = function (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height
+      ) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          },
+        };
+      };
+      // 生成模拟 3D 饼图的配置项
+      let getPie3D = function (pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          console.log(series[i]);
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+        return series;
+      };
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: "楼宇",
+          value: 4256,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#2A71FF",
+          },
+        },
+
+        {
+          name: "工业",
+          value: 2356,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#00EDFE",
+          },
+        },
+        {
+          name: "其他",
+          value: 2018,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#FEDB4B",
+          },
+        },
+      ];
+      const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+      series.push({
+        name: "pie2d",
+        type: "pie",
+
+        label: {
+          show: false,
+          opacity: 1,
+          fontSize: fontSizeRem(14),
+          lineHeight: 20,
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            color: "#fff",
+          },
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["40%", "60%"],
+        //   center: ["30%", "50%"],
+        center: ["40%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      let data = [
+        {
+          name: "楼宇",
+          value: "30%",
+        },
+        {
+          name: "工业",
+          value: "30%",
+        },
+        {
+          name: "其他",
+          value: "40%",
+        },
+      ];
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          show: true,
+          tooltip: {
+            show: false,
+          },
+          orient: "vertical",
+          data: data,
+          top: "center",
+          itemGap: 14,
+          itemHeight: 8,
+          itemWidth: 17,
+          right: "2%",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(12),
+          },
+          formatter: function (name) {
+            let res = data.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return name + "    " + res.value + unit;
+          },
+        },
+        animation: false,
+        tooltip: {
+          show: false,
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              return `${params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                }`;
+            }
+          },
+          textStyle: {
+            fontSize: fontSizeRem(14),
+          },
+        },
+        title: {
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(22),
+          },
+        },
+        // backgroundColor: "#0E3567",
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+          normal: {
+            show: true,
+            length: 10,
+            length2: 10,
+          },
+        },
+        label: {
+          show: false,
+          // position: "outside",
+          // formatter: "{b} \n{d}%",
+          // textStyle: {
+          //   color: "#fff",
+          //   fontSize: "14px",
+          // },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 0.01,
+          //top: '30%',
+          bottom: "50%",
+          left: "-7%",
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 60,
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("ynflzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        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;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          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;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .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;
+          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%;
+
+      .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>
diff --git a/.history/src/views/KHC_20231130093048.vue b/.history/src/views/KHC_20231130093048.vue
new file mode 100644
index 0000000..ad264d1
--- /dev/null
+++ b/.history/src/views/KHC_20231130093048.vue
@@ -0,0 +1,1545 @@
+<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="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </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>
+          </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="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();
+      });
+    },
+
+    //用户行业占比
+    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: "#fff",
+            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("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let getParametricEquation = function (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height
+      ) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          },
+        };
+      };
+      // 生成模拟 3D 饼图的配置项
+      let getPie3D = function (pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          console.log(series[i]);
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+        return series;
+      };
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: "楼宇",
+          value: 4256,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#2A71FF",
+          },
+        },
+
+        {
+          name: "工业",
+          value: 2356,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#00EDFE",
+          },
+        },
+        {
+          name: "其他",
+          value: 2018,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#FEDB4B",
+          },
+        },
+      ];
+      const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+      series.push({
+        name: "pie2d",
+        type: "pie",
+
+        label: {
+          show: false,
+          opacity: 1,
+          fontSize: fontSizeRem(14),
+          lineHeight: 20,
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            color: "#fff",
+          },
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["40%", "60%"],
+        //   center: ["30%", "50%"],
+        center: ["40%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      let data = [
+        {
+          name: "楼宇",
+          value: "30%",
+        },
+        {
+          name: "工业",
+          value: "30%",
+        },
+        {
+          name: "其他",
+          value: "40%",
+        },
+      ];
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          show: true,
+          tooltip: {
+            show: false,
+          },
+          orient: "vertical",
+          data: data,
+          top: "center",
+          itemGap: 14,
+          itemHeight: 8,
+          itemWidth: 17,
+          right: "2%",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(12),
+          },
+          formatter: function (name) {
+            let res = data.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return name + "    " + res.value + unit;
+          },
+        },
+        animation: false,
+        tooltip: {
+          show: false,
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              return `${params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                }`;
+            }
+          },
+          textStyle: {
+            fontSize: fontSizeRem(14),
+          },
+        },
+        title: {
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(22),
+          },
+        },
+        // backgroundColor: "#0E3567",
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+          normal: {
+            show: true,
+            length: 10,
+            length2: 10,
+          },
+        },
+        label: {
+          show: false,
+          // position: "outside",
+          // formatter: "{b} \n{d}%",
+          // textStyle: {
+          //   color: "#fff",
+          //   fontSize: "14px",
+          // },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 0.01,
+          //top: '30%',
+          bottom: "50%",
+          left: "-7%",
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 60,
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("ynflzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        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;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          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;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .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;
+          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%;
+
+      .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>
diff --git a/.history/src/views/TAN_20231129124614.vue b/.history/src/views/TAN_20231129124614.vue
new file mode 100644
index 0000000..4107d9b
--- /dev/null
+++ b/.history/src/views/TAN_20231129124614.vue
@@ -0,0 +1,1347 @@
+<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="center">
+                        <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="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 class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+const fontSizeRem = function (size) {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+};
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        //用户行业占比
+        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: 140,
+                        textStyle: {
+                            rich: {
+                                name: {
+                                    fontSize: 14,
+                                    fontWeight: "normal",
+                                    color: "#fff",
+                                    padding: [10, 0],
+                                },
+                                val: {
+                                    fontSize: 32,
+                                    fontWeight: "bold",
+                                    color: "#fff",
+                                },
+                            },
+                        },
+                    },
+                ],
+                legend: {
+                    orient: "vertical",
+                    icon: "circle",
+                    x: "70%",
+                    y: "center",
+                    itemWidth: 12,
+                    itemHeight: 12,
+                    align: "left",
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 12,
+                            },
+                            value: {
+                                fontSize: 16,
+                                padding: [0, 5, 0, 15],
+                            },
+                            unit: {
+                                fontSize: 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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: 14,
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: 14,
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 12,
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: 14,
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 22,
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: .395833rem
+            /* 76/192 */
+        ;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 2.744792rem
+                /* 527/192 */
+            ;
+            height: .244792rem
+                /* 47/192 */
+            ;
+            font-size: .229167rem
+                /* 44/192 */
+            ;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: .244792rem
+                /* 47/192 */
+            ;
+            letter-spacing: .015625rem
+                /* 3/192 */
+            ;
+            color: #fff;
+            margin-left: -.3125rem
+                /* 60/192 */
+            ;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: calc(100vh - .34375rem
+                /* 66/192 */
+            );
+        display: flex;
+        justify-content: space-between;
+
+        .left {
+            width: 2.270833rem
+                /* 436/192 */
+            ;
+            height: 100%;
+
+            .jrtj {
+                height: 1.53125rem
+                    /* 294/192 */
+                ;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: .833333rem
+                        /* 160/192 */
+                    ;
+                    width: .75rem
+                        /* 144/192 */
+                    ;
+                    height: .1875rem
+                        /* 36/192 */
+                    ;
+                    font-size: .09375rem
+                        /* 18/192 */
+                    ;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 1.130208rem
+                        /* 217/192 */
+                    ;
+                    height: .65625rem
+                        /* 126/192 */
+                    ;
+                    position: absolute;
+                    left: .572917rem
+                        /* 110/192 */
+                    ;
+                    top: .572917rem
+                        /* 110/192 */
+                    ;
+                    text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: .421875rem
+                            /* 81/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        font-size: .125rem
+                            /* 24/192 */
+                        ;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    p:nth-child(2) {
+                        width: .369792rem
+                            /* 71/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        text-align: center;
+                        font-size: .0625rem
+                            /* 12/192 */
+                        ;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    img {
+                        width: 1.130208rem
+                            /* 217/192 */
+                        ;
+                        height: .65625rem
+                            /* 126/192 */
+                        ;
+                    }
+                }
+
+                .insides {
+                    margin-top: .291667rem
+                        /* 56/192 */
+                    ;
+                    width: 2.270833rem
+                        /* 436/192 */
+                    ;
+                    height: 1.53125rem
+                        /* 294/192 */
+                    ;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: .8125rem
+                            /* 156/192 */
+                        ;
+                        display: flex;
+
+                        img {
+                            width: .260417rem
+                                /* 50/192 */
+                            ;
+                            height: .3125rem
+                                /* 60/192 */
+                            ;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: .291667rem
+                                /* 56/192 */
+                            ;
+                            height: .114583rem
+                                /* 22/192 */
+                            ;
+                            font-size: .072917rem
+                                /* 14/192 */
+                            ;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: .114583rem
+                                /* 22/192 */
+                            ;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                width: 100%;
+                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;
+
+                    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%;
+
+            .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%);
+        }
+    }
+}</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130084130.vue b/.history/src/views/TAN_20231130084130.vue
new file mode 100644
index 0000000..6a2fd8a
--- /dev/null
+++ b/.history/src/views/TAN_20231130084130.vue
@@ -0,0 +1,1347 @@
+<!-- <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="center">
+                        <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="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 class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+const fontSizeRem = function (size) {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+};
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        //用户行业占比
+        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: 140,
+                        textStyle: {
+                            rich: {
+                                name: {
+                                    fontSize: 14,
+                                    fontWeight: "normal",
+                                    color: "#fff",
+                                    padding: [10, 0],
+                                },
+                                val: {
+                                    fontSize: 32,
+                                    fontWeight: "bold",
+                                    color: "#fff",
+                                },
+                            },
+                        },
+                    },
+                ],
+                legend: {
+                    orient: "vertical",
+                    icon: "circle",
+                    x: "70%",
+                    y: "center",
+                    itemWidth: 12,
+                    itemHeight: 12,
+                    align: "left",
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 12,
+                            },
+                            value: {
+                                fontSize: 16,
+                                padding: [0, 5, 0, 15],
+                            },
+                            unit: {
+                                fontSize: 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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: 14,
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: 14,
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 12,
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: 14,
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 22,
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: .395833rem
+            /* 76/192 */
+        ;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 2.744792rem
+                /* 527/192 */
+            ;
+            height: .244792rem
+                /* 47/192 */
+            ;
+            font-size: .229167rem
+                /* 44/192 */
+            ;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: .244792rem
+                /* 47/192 */
+            ;
+            letter-spacing: .015625rem
+                /* 3/192 */
+            ;
+            color: #fff;
+            margin-left: -.3125rem
+                /* 60/192 */
+            ;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: calc(100vh - .34375rem
+                /* 66/192 */
+            );
+        display: flex;
+        justify-content: space-between;
+
+        .left {
+            width: 2.270833rem
+                /* 436/192 */
+            ;
+            height: 100%;
+
+            .jrtj {
+                height: 1.53125rem
+                    /* 294/192 */
+                ;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: .833333rem
+                        /* 160/192 */
+                    ;
+                    width: .75rem
+                        /* 144/192 */
+                    ;
+                    height: .1875rem
+                        /* 36/192 */
+                    ;
+                    font-size: .09375rem
+                        /* 18/192 */
+                    ;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 1.130208rem
+                        /* 217/192 */
+                    ;
+                    height: .65625rem
+                        /* 126/192 */
+                    ;
+                    position: absolute;
+                    left: .572917rem
+                        /* 110/192 */
+                    ;
+                    top: .572917rem
+                        /* 110/192 */
+                    ;
+                    text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: .421875rem
+                            /* 81/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        font-size: .125rem
+                            /* 24/192 */
+                        ;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    p:nth-child(2) {
+                        width: .369792rem
+                            /* 71/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        text-align: center;
+                        font-size: .0625rem
+                            /* 12/192 */
+                        ;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    img {
+                        width: 1.130208rem
+                            /* 217/192 */
+                        ;
+                        height: .65625rem
+                            /* 126/192 */
+                        ;
+                    }
+                }
+
+                .insides {
+                    margin-top: .291667rem
+                        /* 56/192 */
+                    ;
+                    width: 2.270833rem
+                        /* 436/192 */
+                    ;
+                    height: 1.53125rem
+                        /* 294/192 */
+                    ;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: .8125rem
+                            /* 156/192 */
+                        ;
+                        display: flex;
+
+                        img {
+                            width: .260417rem
+                                /* 50/192 */
+                            ;
+                            height: .3125rem
+                                /* 60/192 */
+                            ;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: .291667rem
+                                /* 56/192 */
+                            ;
+                            height: .114583rem
+                                /* 22/192 */
+                            ;
+                            font-size: .072917rem
+                                /* 14/192 */
+                            ;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: .114583rem
+                                /* 22/192 */
+                            ;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                width: 100%;
+                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;
+
+                    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%;
+
+            .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%);
+        }
+    }
+}</style>
+   -->
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130084225.vue b/.history/src/views/TAN_20231130084225.vue
new file mode 100644
index 0000000..4107d9b
--- /dev/null
+++ b/.history/src/views/TAN_20231130084225.vue
@@ -0,0 +1,1347 @@
+<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="center">
+                        <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="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 class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+const fontSizeRem = function (size) {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+};
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        //用户行业占比
+        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: 140,
+                        textStyle: {
+                            rich: {
+                                name: {
+                                    fontSize: 14,
+                                    fontWeight: "normal",
+                                    color: "#fff",
+                                    padding: [10, 0],
+                                },
+                                val: {
+                                    fontSize: 32,
+                                    fontWeight: "bold",
+                                    color: "#fff",
+                                },
+                            },
+                        },
+                    },
+                ],
+                legend: {
+                    orient: "vertical",
+                    icon: "circle",
+                    x: "70%",
+                    y: "center",
+                    itemWidth: 12,
+                    itemHeight: 12,
+                    align: "left",
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 12,
+                            },
+                            value: {
+                                fontSize: 16,
+                                padding: [0, 5, 0, 15],
+                            },
+                            unit: {
+                                fontSize: 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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: 14,
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: 14,
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 12,
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: 14,
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 22,
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: .395833rem
+            /* 76/192 */
+        ;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 2.744792rem
+                /* 527/192 */
+            ;
+            height: .244792rem
+                /* 47/192 */
+            ;
+            font-size: .229167rem
+                /* 44/192 */
+            ;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: .244792rem
+                /* 47/192 */
+            ;
+            letter-spacing: .015625rem
+                /* 3/192 */
+            ;
+            color: #fff;
+            margin-left: -.3125rem
+                /* 60/192 */
+            ;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: calc(100vh - .34375rem
+                /* 66/192 */
+            );
+        display: flex;
+        justify-content: space-between;
+
+        .left {
+            width: 2.270833rem
+                /* 436/192 */
+            ;
+            height: 100%;
+
+            .jrtj {
+                height: 1.53125rem
+                    /* 294/192 */
+                ;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: .833333rem
+                        /* 160/192 */
+                    ;
+                    width: .75rem
+                        /* 144/192 */
+                    ;
+                    height: .1875rem
+                        /* 36/192 */
+                    ;
+                    font-size: .09375rem
+                        /* 18/192 */
+                    ;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 1.130208rem
+                        /* 217/192 */
+                    ;
+                    height: .65625rem
+                        /* 126/192 */
+                    ;
+                    position: absolute;
+                    left: .572917rem
+                        /* 110/192 */
+                    ;
+                    top: .572917rem
+                        /* 110/192 */
+                    ;
+                    text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: .421875rem
+                            /* 81/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        font-size: .125rem
+                            /* 24/192 */
+                        ;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    p:nth-child(2) {
+                        width: .369792rem
+                            /* 71/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        text-align: center;
+                        font-size: .0625rem
+                            /* 12/192 */
+                        ;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    img {
+                        width: 1.130208rem
+                            /* 217/192 */
+                        ;
+                        height: .65625rem
+                            /* 126/192 */
+                        ;
+                    }
+                }
+
+                .insides {
+                    margin-top: .291667rem
+                        /* 56/192 */
+                    ;
+                    width: 2.270833rem
+                        /* 436/192 */
+                    ;
+                    height: 1.53125rem
+                        /* 294/192 */
+                    ;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: .8125rem
+                            /* 156/192 */
+                        ;
+                        display: flex;
+
+                        img {
+                            width: .260417rem
+                                /* 50/192 */
+                            ;
+                            height: .3125rem
+                                /* 60/192 */
+                            ;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: .291667rem
+                                /* 56/192 */
+                            ;
+                            height: .114583rem
+                                /* 22/192 */
+                            ;
+                            font-size: .072917rem
+                                /* 14/192 */
+                            ;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: .114583rem
+                                /* 22/192 */
+                            ;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                width: 100%;
+                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;
+
+                    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%;
+
+            .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%);
+        }
+    }
+}</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130093219.vue b/.history/src/views/TAN_20231130093219.vue
new file mode 100644
index 0000000..b871ebd
--- /dev/null
+++ b/.history/src/views/TAN_20231130093219.vue
@@ -0,0 +1,1348 @@
+<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="center">
+                        <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="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 class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+const fontSizeRem = function (size) {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+};
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        //用户行业占比
+        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: 140,
+                        textStyle: {
+                            rich: {
+                                name: {
+                                    fontSize: 14,
+                                    fontWeight: "normal",
+                                    color: "#fff",
+                                    padding: [10, 0],
+                                },
+                                val: {
+                                    fontSize: 32,
+                                    fontWeight: "bold",
+                                    color: "#fff",
+                                },
+                            },
+                        },
+                    },
+                ],
+                legend: {
+                    orient: "vertical",
+                    icon: "circle",
+                    x: "70%",
+                    y: "center",
+                    itemWidth: 12,
+                    itemHeight: 12,
+                    align: "left",
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 12,
+                            },
+                            value: {
+                                fontSize: 16,
+                                padding: [0, 5, 0, 15],
+                            },
+                            unit: {
+                                fontSize: 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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: 14,
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: 14,
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 12,
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: 14,
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 22,
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: .395833rem
+            /* 76/192 */
+        ;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 2.744792rem
+                /* 527/192 */
+            ;
+            height: .244792rem
+                /* 47/192 */
+            ;
+            font-size: .229167rem
+                /* 44/192 */
+            ;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: .244792rem
+                /* 47/192 */
+            ;
+            letter-spacing: .015625rem
+                /* 3/192 */
+            ;
+            color: #fff;
+            margin-left: -.3125rem
+                /* 60/192 */
+            ;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: calc(100vh - .34375rem
+                /* 66/192 */
+            );
+        display: flex;
+        justify-content: space-between;
+
+        .left {
+            width: 2.270833rem
+                /* 436/192 */
+            ;
+            height: 100%;
+
+            .jrtj {
+                height: 1.53125rem
+                    /* 294/192 */
+                ;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: .833333rem
+                        /* 160/192 */
+                    ;
+                    width: .75rem
+                        /* 144/192 */
+                    ;
+                    height: .1875rem
+                        /* 36/192 */
+                    ;
+                    font-size: .09375rem
+                        /* 18/192 */
+                    ;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 1.130208rem
+                        /* 217/192 */
+                    ;
+                    height: .65625rem
+                        /* 126/192 */
+                    ;
+                    position: absolute;
+                    left: .572917rem
+                        /* 110/192 */
+                    ;
+                    top: .572917rem
+                        /* 110/192 */
+                    ;
+                    text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: .421875rem
+                            /* 81/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        font-size: .125rem
+                            /* 24/192 */
+                        ;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    p:nth-child(2) {
+                        width: .369792rem
+                            /* 71/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        text-align: center;
+                        font-size: .0625rem
+                            /* 12/192 */
+                        ;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    img {
+                        width: 1.130208rem
+                            /* 217/192 */
+                        ;
+                        height: .65625rem
+                            /* 126/192 */
+                        ;
+                    }
+                }
+
+                .insides {
+                    margin-top: .291667rem
+                        /* 56/192 */
+                    ;
+                    width: 2.270833rem
+                        /* 436/192 */
+                    ;
+                    height: 1.53125rem
+                        /* 294/192 */
+                    ;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: .8125rem
+                            /* 156/192 */
+                        ;
+                        display: flex;
+
+                        img {
+                            width: .260417rem
+                                /* 50/192 */
+                            ;
+                            height: .3125rem
+                                /* 60/192 */
+                            ;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: .291667rem
+                                /* 56/192 */
+                            ;
+                            height: .114583rem
+                                /* 22/192 */
+                            ;
+                            font-size: .072917rem
+                                /* 14/192 */
+                            ;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: .114583rem
+                                /* 22/192 */
+                            ;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                width: 100%;
+                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;
+
+                    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%;
+
+            .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%);
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130094725.vue b/.history/src/views/TAN_20231130094725.vue
new file mode 100644
index 0000000..3eb7c14
--- /dev/null
+++ b/.history/src/views/TAN_20231130094725.vue
@@ -0,0 +1,1564 @@
+<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="center">
+                        <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="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>
+import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 110px;
+                    top: 110px;
+                    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;
+                    }
+
+                    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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130094754.vue b/.history/src/views/TAN_20231130094754.vue
new file mode 100644
index 0000000..13694eb
--- /dev/null
+++ b/.history/src/views/TAN_20231130094754.vue
@@ -0,0 +1,1564 @@
+<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="center">
+                        <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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 110px;
+                    top: 110px;
+                    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;
+                    }
+
+                    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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130095056.vue b/.history/src/views/TAN_20231130095056.vue
new file mode 100644
index 0000000..a192dd5
--- /dev/null
+++ b/.history/src/views/TAN_20231130095056.vue
@@ -0,0 +1,1564 @@
+<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="center">
+                        <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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 0px;
+                    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;
+                    }
+
+                    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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130095139.vue b/.history/src/views/TAN_20231130095139.vue
new file mode 100644
index 0000000..5326b64
--- /dev/null
+++ b/.history/src/views/TAN_20231130095139.vue
@@ -0,0 +1,1564 @@
+<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="center">
+                        <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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 0px;
+                    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;
+                    }
+
+                    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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130095228.vue b/.history/src/views/TAN_20231130095228.vue
new file mode 100644
index 0000000..533b3f3
--- /dev/null
+++ b/.history/src/views/TAN_20231130095228.vue
@@ -0,0 +1,1564 @@
+<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="center">
+                        <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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 20px;
+                    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;
+                    }
+
+                    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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130095236.vue b/.history/src/views/TAN_20231130095236.vue
new file mode 100644
index 0000000..533b3f3
--- /dev/null
+++ b/.history/src/views/TAN_20231130095236.vue
@@ -0,0 +1,1564 @@
+<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="center">
+                        <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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 20px;
+                    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;
+                    }
+
+                    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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130095241.vue b/.history/src/views/TAN_20231130095241.vue
new file mode 100644
index 0000000..4d31a07
--- /dev/null
+++ b/.history/src/views/TAN_20231130095241.vue
@@ -0,0 +1,1565 @@
+<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="center">
+                        <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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 20px;
+                    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;
+                    }
+
+                    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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130095247.vue b/.history/src/views/TAN_20231130095247.vue
new file mode 100644
index 0000000..02d70b3
--- /dev/null
+++ b/.history/src/views/TAN_20231130095247.vue
@@ -0,0 +1,1566 @@
+<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="center">
+                        <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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 20px;
+                    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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130095346.vue b/.history/src/views/TAN_20231130095346.vue
new file mode 100644
index 0000000..1910450
--- /dev/null
+++ b/.history/src/views/TAN_20231130095346.vue
@@ -0,0 +1,1566 @@
+<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="center">
+                        <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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130095444.vue b/.history/src/views/TAN_20231130095444.vue
new file mode 100644
index 0000000..cec2d85
--- /dev/null
+++ b/.history/src/views/TAN_20231130095444.vue
@@ -0,0 +1,1566 @@
+<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="center">
+                        <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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130095446.vue b/.history/src/views/TAN_20231130095446.vue
new file mode 100644
index 0000000..cec2d85
--- /dev/null
+++ b/.history/src/views/TAN_20231130095446.vue
@@ -0,0 +1,1566 @@
+<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="center">
+                        <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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130095502.vue b/.history/src/views/TAN_20231130095502.vue
new file mode 100644
index 0000000..855abeb
--- /dev/null
+++ b/.history/src/views/TAN_20231130095502.vue
@@ -0,0 +1,1566 @@
+<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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130095653.vue b/.history/src/views/TAN_20231130095653.vue
new file mode 100644
index 0000000..d4a2338
--- /dev/null
+++ b/.history/src/views/TAN_20231130095653.vue
@@ -0,0 +1,1566 @@
+<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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130095749.vue b/.history/src/views/TAN_20231130095749.vue
new file mode 100644
index 0000000..091ace9
--- /dev/null
+++ b/.history/src/views/TAN_20231130095749.vue
@@ -0,0 +1,1567 @@
+<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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130095750.vue b/.history/src/views/TAN_20231130095750.vue
new file mode 100644
index 0000000..091ace9
--- /dev/null
+++ b/.history/src/views/TAN_20231130095750.vue
@@ -0,0 +1,1567 @@
+<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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130100017.vue b/.history/src/views/TAN_20231130100017.vue
new file mode 100644
index 0000000..57deea3
--- /dev/null
+++ b/.history/src/views/TAN_20231130100017.vue
@@ -0,0 +1,1567 @@
+<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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130100137.vue b/.history/src/views/TAN_20231130100137.vue
new file mode 100644
index 0000000..2b54076
--- /dev/null
+++ b/.history/src/views/TAN_20231130100137.vue
@@ -0,0 +1,1567 @@
+<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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130100518.vue b/.history/src/views/TAN_20231130100518.vue
new file mode 100644
index 0000000..6455d9e
--- /dev/null
+++ b/.history/src/views/TAN_20231130100518.vue
@@ -0,0 +1,1444 @@
+<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="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>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130100532.vue b/.history/src/views/TAN_20231130100532.vue
new file mode 100644
index 0000000..901ec1b
--- /dev/null
+++ b/.history/src/views/TAN_20231130100532.vue
@@ -0,0 +1,1446 @@
+<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>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130100605.vue b/.history/src/views/TAN_20231130100605.vue
new file mode 100644
index 0000000..fbc8172
--- /dev/null
+++ b/.history/src/views/TAN_20231130100605.vue
@@ -0,0 +1,1446 @@
+<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>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 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;
+                }
+
+                #tyjg {
+                    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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130100628.vue b/.history/src/views/TAN_20231130100628.vue
new file mode 100644
index 0000000..99317c3
--- /dev/null
+++ b/.history/src/views/TAN_20231130100628.vue
@@ -0,0 +1,1446 @@
+<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>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 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%;
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130100703.vue b/.history/src/views/TAN_20231130100703.vue
new file mode 100644
index 0000000..3f3e4d7
--- /dev/null
+++ b/.history/src/views/TAN_20231130100703.vue
@@ -0,0 +1,1446 @@
+<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>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130100717.vue b/.history/src/views/TAN_20231130100717.vue
new file mode 100644
index 0000000..3f3e4d7
--- /dev/null
+++ b/.history/src/views/TAN_20231130100717.vue
@@ -0,0 +1,1446 @@
+<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>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130100924.vue b/.history/src/views/TAN_20231130100924.vue
new file mode 100644
index 0000000..84db615
--- /dev/null
+++ b/.history/src/views/TAN_20231130100924.vue
@@ -0,0 +1,1460 @@
+<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>
+                            <div>
+                                <p></p>
+                                <p></p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                            <div>
+                                <p></p>
+                                <p></p>
+                                <p></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101208.vue b/.history/src/views/TAN_20231130101208.vue
new file mode 100644
index 0000000..1738e64
--- /dev/null
+++ b/.history/src/views/TAN_20231130101208.vue
@@ -0,0 +1,1455 @@
+<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>
+                            <div v-for="(item, index) in controls" :key="index">
+                                <p></p>
+                                <p></p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101224.vue b/.history/src/views/TAN_20231130101224.vue
new file mode 100644
index 0000000..ced150e
--- /dev/null
+++ b/.history/src/views/TAN_20231130101224.vue
@@ -0,0 +1,1455 @@
+<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>
+                            <div v-for="(item, index) in controls" :key="index" class="tbg">
+                                <p></p>
+                                <p></p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101237.vue b/.history/src/views/TAN_20231130101237.vue
new file mode 100644
index 0000000..0b9f7c2
--- /dev/null
+++ b/.history/src/views/TAN_20231130101237.vue
@@ -0,0 +1,1455 @@
+<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>
+                            <div v-for="(item, index) in controls" :key="index" class="tbg">
+                                <p>{{ item.name }}</p>
+                                <p></p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101243.vue b/.history/src/views/TAN_20231130101243.vue
new file mode 100644
index 0000000..f105499
--- /dev/null
+++ b/.history/src/views/TAN_20231130101243.vue
@@ -0,0 +1,1455 @@
+<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>
+                            <div v-for="(item, index) in controls" :key="index" class="tbg">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p></p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101305.vue b/.history/src/views/TAN_20231130101305.vue
new file mode 100644
index 0000000..35f8d2e
--- /dev/null
+++ b/.history/src/views/TAN_20231130101305.vue
@@ -0,0 +1,1455 @@
+<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>
+                            <div v-for="(item, index) in controls" :key="index" class="tbg">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="count"></span></p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101320.vue b/.history/src/views/TAN_20231130101320.vue
new file mode 100644
index 0000000..1192d2c
--- /dev/null
+++ b/.history/src/views/TAN_20231130101320.vue
@@ -0,0 +1,1455 @@
+<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>
+                            <div v-for="(item, index) in controls" :key="index" class="tbg">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="count">{{ item.count }}</span></p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101505.vue b/.history/src/views/TAN_20231130101505.vue
new file mode 100644
index 0000000..71f281c
--- /dev/null
+++ b/.history/src/views/TAN_20231130101505.vue
@@ -0,0 +1,1462 @@
+<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>
+                            <div v-for="(item, index) in controls" :key="index" class="tbg">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow==true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101530.vue b/.history/src/views/TAN_20231130101530.vue
new file mode 100644
index 0000000..8f655fa
--- /dev/null
+++ b/.history/src/views/TAN_20231130101530.vue
@@ -0,0 +1,1462 @@
+<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>
+                            <div v-for="(item, index) in controls" :key="index" class="tbg">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow==true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101712.vue b/.history/src/views/TAN_20231130101712.vue
new file mode 100644
index 0000000..f9224bb
--- /dev/null
+++ b/.history/src/views/TAN_20231130101712.vue
@@ -0,0 +1,1466 @@
+<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_cont">
+                            <div v-for="(item, index) in controls" :key="index" class="tbg">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow==true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                    .tbg{
+                        width: 100%;
+                        
+                    }
+                }
+            }
+
+            .ynflzb {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #ynflzb {
+                    width: 100%;
+                    height: 100%;
+                }
+
+                .pic {
+                    width: 300px;
+                    position: absolute;
+                    height: 150px;
+                    top: 100px;
+                    left: 40px;
+                }
+            }
+
+            .qyydlpm {
+                height: 353px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .list {
+                    list-style: none;
+                    height: 300px;
+                    width: 100%;
+                    float: left;
+                    margin-top: 50px;
+
+                    li {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        padding: 0 30px 0 30px;
+                        box-sizing: border-box;
+                        margin: 9px;
+
+                        p:nth-of-type(1) {
+                            background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+                            width: 24px;
+                            height: 16px;
+                            line-height: 16px;
+                            background: rgba(34, 23, 23, 0.1);
+                            border-radius: 0px 0px 0px 0px;
+                            opacity: 1;
+                            text-align: center;
+                            border: 1px solid #b1b1b1;
+                            background-size: cover;
+                        }
+
+                        p:nth-of-type(2) {
+                            width: 190px;
+                            height: 12px;
+                            font-size: 14px;
+                            font-family: "AlibabaPuHuiTi";
+                            font-weight: 400;
+                            color: rgba(255, 255, 255, 0.8);
+                            line-height: 12px;
+                        }
+
+                        p:nth-of-type(3) {
+                            width: 27px;
+                            height: 12px;
+                            font-size: 14px;
+                            font-family: "AlibabaPuHuiTi";
+                            font-weight: 500;
+                            color: rgba(255, 255, 255, 0.8);
+                            line-height: 12px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .footer {
+            position: absolute;
+            width: 994px;
+            height: 325px;
+            background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+            background-size: cover;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101715.vue b/.history/src/views/TAN_20231130101715.vue
new file mode 100644
index 0000000..896f3c0
--- /dev/null
+++ b/.history/src/views/TAN_20231130101715.vue
@@ -0,0 +1,1466 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="tbg">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow==true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                    .tbg{
+                        width: 100%;
+                        
+                    }
+                }
+            }
+
+            .ynflzb {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #ynflzb {
+                    width: 100%;
+                    height: 100%;
+                }
+
+                .pic {
+                    width: 300px;
+                    position: absolute;
+                    height: 150px;
+                    top: 100px;
+                    left: 40px;
+                }
+            }
+
+            .qyydlpm {
+                height: 353px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .list {
+                    list-style: none;
+                    height: 300px;
+                    width: 100%;
+                    float: left;
+                    margin-top: 50px;
+
+                    li {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        padding: 0 30px 0 30px;
+                        box-sizing: border-box;
+                        margin: 9px;
+
+                        p:nth-of-type(1) {
+                            background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+                            width: 24px;
+                            height: 16px;
+                            line-height: 16px;
+                            background: rgba(34, 23, 23, 0.1);
+                            border-radius: 0px 0px 0px 0px;
+                            opacity: 1;
+                            text-align: center;
+                            border: 1px solid #b1b1b1;
+                            background-size: cover;
+                        }
+
+                        p:nth-of-type(2) {
+                            width: 190px;
+                            height: 12px;
+                            font-size: 14px;
+                            font-family: "AlibabaPuHuiTi";
+                            font-weight: 400;
+                            color: rgba(255, 255, 255, 0.8);
+                            line-height: 12px;
+                        }
+
+                        p:nth-of-type(3) {
+                            width: 27px;
+                            height: 12px;
+                            font-size: 14px;
+                            font-family: "AlibabaPuHuiTi";
+                            font-weight: 500;
+                            color: rgba(255, 255, 255, 0.8);
+                            line-height: 12px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .footer {
+            position: absolute;
+            width: 994px;
+            height: 325px;
+            background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+            background-size: cover;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101723.vue b/.history/src/views/TAN_20231130101723.vue
new file mode 100644
index 0000000..9f1008d
--- /dev/null
+++ b/.history/src/views/TAN_20231130101723.vue
@@ -0,0 +1,1466 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow==true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                    .tbg{
+                        width: 100%;
+                        
+                    }
+                }
+            }
+
+            .ynflzb {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #ynflzb {
+                    width: 100%;
+                    height: 100%;
+                }
+
+                .pic {
+                    width: 300px;
+                    position: absolute;
+                    height: 150px;
+                    top: 100px;
+                    left: 40px;
+                }
+            }
+
+            .qyydlpm {
+                height: 353px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .list {
+                    list-style: none;
+                    height: 300px;
+                    width: 100%;
+                    float: left;
+                    margin-top: 50px;
+
+                    li {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        padding: 0 30px 0 30px;
+                        box-sizing: border-box;
+                        margin: 9px;
+
+                        p:nth-of-type(1) {
+                            background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
+                            width: 24px;
+                            height: 16px;
+                            line-height: 16px;
+                            background: rgba(34, 23, 23, 0.1);
+                            border-radius: 0px 0px 0px 0px;
+                            opacity: 1;
+                            text-align: center;
+                            border: 1px solid #b1b1b1;
+                            background-size: cover;
+                        }
+
+                        p:nth-of-type(2) {
+                            width: 190px;
+                            height: 12px;
+                            font-size: 14px;
+                            font-family: "AlibabaPuHuiTi";
+                            font-weight: 400;
+                            color: rgba(255, 255, 255, 0.8);
+                            line-height: 12px;
+                        }
+
+                        p:nth-of-type(3) {
+                            width: 27px;
+                            height: 12px;
+                            font-size: 14px;
+                            font-family: "AlibabaPuHuiTi";
+                            font-weight: 500;
+                            color: rgba(255, 255, 255, 0.8);
+                            line-height: 12px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .footer {
+            position: absolute;
+            width: 994px;
+            height: 325px;
+            background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+            background-size: cover;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101910.vue b/.history/src/views/TAN_20231130101910.vue
new file mode 100644
index 0000000..76203cb
--- /dev/null
+++ b/.history/src/views/TAN_20231130101910.vue
@@ -0,0 +1,1467 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow==true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                    .t_content{
+                        width: 100%;
+                        display: flex;
+                        
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101926.vue b/.history/src/views/TAN_20231130101926.vue
new file mode 100644
index 0000000..69b8764
--- /dev/null
+++ b/.history/src/views/TAN_20231130101926.vue
@@ -0,0 +1,1470 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow==true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+                    .t_content{
+                        width: 100%;
+                        display: flex;
+                        
+                    }
+                    .t_con{
+                        width: 106px;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130101939.vue b/.history/src/views/TAN_20231130101939.vue
new file mode 100644
index 0000000..475f283
--- /dev/null
+++ b/.history/src/views/TAN_20231130101939.vue
@@ -0,0 +1,1477 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130102032.vue b/.history/src/views/TAN_20231130102032.vue
new file mode 100644
index 0000000..19cea28
--- /dev/null
+++ b/.history/src/views/TAN_20231130102032.vue
@@ -0,0 +1,1478 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130102052.vue b/.history/src/views/TAN_20231130102052.vue
new file mode 100644
index 0000000..bdec3ad
--- /dev/null
+++ b/.history/src/views/TAN_20231130102052.vue
@@ -0,0 +1,1479 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130102134.vue b/.history/src/views/TAN_20231130102134.vue
new file mode 100644
index 0000000..713ed51
--- /dev/null
+++ b/.history/src/views/TAN_20231130102134.vue
@@ -0,0 +1,1484 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls:[
+                {
+
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130102221.vue b/.history/src/views/TAN_20231130102221.vue
new file mode 100644
index 0000000..dc92372
--- /dev/null
+++ b/.history/src/views/TAN_20231130102221.vue
@@ -0,0 +1,1511 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "",
+                    count: "",
+                    isShow: true,
+                },
+                {
+                    name: "",
+                    count: "",
+                    isShow: true,
+                },
+                {
+                    name: "",
+                    count: "",
+                    isShow: false,
+                },
+                {
+                    name: "",
+                    count: "",
+                    isShow: true,
+                },
+                {
+                    name: "",
+                    count: "",
+                    isShow: true,
+                },
+                {
+                    name: "",
+                    count: "",
+                    isShow: true,
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130102257.vue b/.history/src/views/TAN_20231130102257.vue
new file mode 100644
index 0000000..158d76e
--- /dev/null
+++ b/.history/src/views/TAN_20231130102257.vue
@@ -0,0 +1,1511 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "",
+                    isShow: true,
+                },
+                {
+                    name: "",
+                    count: "",
+                    isShow: false,
+                },
+                {
+                    name: "",
+                    count: "",
+                    isShow: true,
+                },
+                {
+                    name: "",
+                    count: "",
+                    isShow: true,
+                },
+                {
+                    name: "",
+                    count: "",
+                    isShow: true,
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130102324.vue b/.history/src/views/TAN_20231130102324.vue
new file mode 100644
index 0000000..dd8a5ed
--- /dev/null
+++ b/.history/src/views/TAN_20231130102324.vue
@@ -0,0 +1,1511 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                },
+                {
+                    name: "",
+                    count: "6566",
+                    isShow: true,
+                },
+                {
+                    name: "",
+                    count: "",
+                    isShow: true,
+                },
+                {
+                    name: "",
+                    count: "",
+                    isShow: true,
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130102420.vue b/.history/src/views/TAN_20231130102420.vue
new file mode 100644
index 0000000..335994a
--- /dev/null
+++ b/.history/src/views/TAN_20231130102420.vue
@@ -0,0 +1,1511 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    isShow: true,
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130102641.vue b/.history/src/views/TAN_20231130102641.vue
new file mode 100644
index 0000000..c1be6b4
--- /dev/null
+++ b/.history/src/views/TAN_20231130102641.vue
@@ -0,0 +1,1512 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <span style="color: gba(247, 31, 31, 1)">{{ item.percent }}</span>
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    isShow: true,
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130102830.vue b/.history/src/views/TAN_20231130102830.vue
new file mode 100644
index 0000000..26fc9f2
--- /dev/null
+++ b/.history/src/views/TAN_20231130102830.vue
@@ -0,0 +1,1514 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <span style="color: gba(247, 31, 31, 1)">{{ item.percent }}</span>
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <span style="rgba(12, 217, 181, 1)">{{ item.percent }}</span>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    isShow: true,
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130102841.vue b/.history/src/views/TAN_20231130102841.vue
new file mode 100644
index 0000000..9e1f381
--- /dev/null
+++ b/.history/src/views/TAN_20231130102841.vue
@@ -0,0 +1,1519 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <span style="color: gba(247, 31, 31, 1)">{{ item.percent }}</span>
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <span style="rgba(12, 217, 181, 1)">{{ item.percent }}</span>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent:"10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130102906.vue b/.history/src/views/TAN_20231130102906.vue
new file mode 100644
index 0000000..b255391
--- /dev/null
+++ b/.history/src/views/TAN_20231130102906.vue
@@ -0,0 +1,1519 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <span style="color: gba(247, 31, 31, 1)">{{ item.percent }}%</span>
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <span style="rgba(12, 217, 181, 1)">{{ item.percent }}%</span>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent:"10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130102956.vue b/.history/src/views/TAN_20231130102956.vue
new file mode 100644
index 0000000..3452a2f
--- /dev/null
+++ b/.history/src/views/TAN_20231130102956.vue
@@ -0,0 +1,1519 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <span style="color: gba(247, 31, 31, 1)">{{ item.percent }}%</span>
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <span style="#0CD9B5">{{ item.percent }}%</span>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent:"10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103008.vue b/.history/src/views/TAN_20231130103008.vue
new file mode 100644
index 0000000..3069230
--- /dev/null
+++ b/.history/src/views/TAN_20231130103008.vue
@@ -0,0 +1,1519 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <span style="#F71F1F">{{ item.percent }}%</span>
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <span style="#0CD9B5">{{ item.percent }}%</span>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent:"10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103009.vue b/.history/src/views/TAN_20231130103009.vue
new file mode 100644
index 0000000..3069230
--- /dev/null
+++ b/.history/src/views/TAN_20231130103009.vue
@@ -0,0 +1,1519 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><span class="t_count">{{ item.count }}</span>
+                                    <span class="t_img" v-if="item.isShow == true">
+                                        <span style="#F71F1F">{{ item.percent }}%</span>
+                                        <img src="../assets/tan/325数值上升.png" alt="">
+                                    </span>
+                                    <span class="t_img" v-else>
+                                        <span style="#0CD9B5">{{ item.percent }}%</span>
+                                        <img src="../assets/tan/325数值上升 (2).png" alt="">
+                                    </span>
+                                </p>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent:"10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent:"10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103043.vue b/.history/src/views/TAN_20231130103043.vue
new file mode 100644
index 0000000..f544e32
--- /dev/null
+++ b/.history/src/views/TAN_20231130103043.vue
@@ -0,0 +1,1519 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103137.vue b/.history/src/views/TAN_20231130103137.vue
new file mode 100644
index 0000000..dd364da
--- /dev/null
+++ b/.history/src/views/TAN_20231130103137.vue
@@ -0,0 +1,1522 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                        .t_img1{
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103148.vue b/.history/src/views/TAN_20231130103148.vue
new file mode 100644
index 0000000..048e911
--- /dev/null
+++ b/.history/src/views/TAN_20231130103148.vue
@@ -0,0 +1,1525 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                        .t_img1{
+                            color: #F71F1F;
+                        }
+                        .t_img2{
+                            color: black;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103159.vue b/.history/src/views/TAN_20231130103159.vue
new file mode 100644
index 0000000..edb2470
--- /dev/null
+++ b/.history/src/views/TAN_20231130103159.vue
@@ -0,0 +1,1525 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                        .t_img1{
+                            color: #F71F1F;
+                        }
+                        .t_img2{
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103218.vue b/.history/src/views/TAN_20231130103218.vue
new file mode 100644
index 0000000..864c697
--- /dev/null
+++ b/.history/src/views/TAN_20231130103218.vue
@@ -0,0 +1,1525 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        border: 1px solid #061A4D;
+                        .t_img1{
+                            color: #0CD9B5;
+                        }
+                        .t_img2{
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103230.vue b/.history/src/views/TAN_20231130103230.vue
new file mode 100644
index 0000000..708c25c
--- /dev/null
+++ b/.history/src/views/TAN_20231130103230.vue
@@ -0,0 +1,1526 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: 1;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        .t_img1{
+                            color: #0CD9B5;
+                        }
+                        .t_img2{
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103242.vue b/.history/src/views/TAN_20231130103242.vue
new file mode 100644
index 0000000..43156b2
--- /dev/null
+++ b/.history/src/views/TAN_20231130103242.vue
@@ -0,0 +1,1527 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        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_img1{
+                            color: #0CD9B5;
+                        }
+                        .t_img2{
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103245.vue b/.history/src/views/TAN_20231130103245.vue
new file mode 100644
index 0000000..8b5eed7
--- /dev/null
+++ b/.history/src/views/TAN_20231130103245.vue
@@ -0,0 +1,1527 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+                        .t_img1{
+                            color: #0CD9B5;
+                        }
+                        .t_img2{
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103329.vue b/.history/src/views/TAN_20231130103329.vue
new file mode 100644
index 0000000..6e8390b
--- /dev/null
+++ b/.history/src/views/TAN_20231130103329.vue
@@ -0,0 +1,1539 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103441.vue b/.history/src/views/TAN_20231130103441.vue
new file mode 100644
index 0000000..6e8390b
--- /dev/null
+++ b/.history/src/views/TAN_20231130103441.vue
@@ -0,0 +1,1539 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103451.vue b/.history/src/views/TAN_20231130103451.vue
new file mode 100644
index 0000000..a67b04b
--- /dev/null
+++ b/.history/src/views/TAN_20231130103451.vue
@@ -0,0 +1,1540 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin: 0 auto;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103510.vue b/.history/src/views/TAN_20231130103510.vue
new file mode 100644
index 0000000..54db017
--- /dev/null
+++ b/.history/src/views/TAN_20231130103510.vue
@@ -0,0 +1,1540 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 200px;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103523.vue b/.history/src/views/TAN_20231130103523.vue
new file mode 100644
index 0000000..29d150a
--- /dev/null
+++ b/.history/src/views/TAN_20231130103523.vue
@@ -0,0 +1,1541 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 200px;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                        align-content: space-between;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103531.vue b/.history/src/views/TAN_20231130103531.vue
new file mode 100644
index 0000000..43349de
--- /dev/null
+++ b/.history/src/views/TAN_20231130103531.vue
@@ -0,0 +1,1541 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                        align-content: space-between;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103633.vue b/.history/src/views/TAN_20231130103633.vue
new file mode 100644
index 0000000..f3e9b54
--- /dev/null
+++ b/.history/src/views/TAN_20231130103633.vue
@@ -0,0 +1,1555 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>客户侧总体用能情况分析</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="jrtj">
+                    <p class="title">接入统计</p>
+                    <div class="insides">
+                        <div class="con" v-for="item in tjlist">
+                            <img src="../assets/tan/组 3128.png" alt="">
+                            <div class="r_con">
+                                <p>{{ item.count }}</p>
+                                <p>{{ item.name }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="centers">
+                        <p>100</p>
+                        <p>总接入数量</p>
+                        <img src="../assets/tan/组 3129.png" alt="" class="center_img" />
+                    </div>
+                </div>
+                <div class="ssfhzs">
+                    <p class="title">实时负荷走势</p>
+                    <ul class="typeBox">
+                        <li :class="type == '总量' ? 'active' : ''" @click="type = '总量'">
+                            总量
+                        </li>
+                        <li :class="type == '发电' ? 'active' : ''" @click="type = '发电'">
+                            发电
+                        </li>
+                        <li :class="type == '石化' ? 'active' : ''" @click="type = '石化'">
+                            石化
+                        </li>
+                        <li :class="type == '钢铁' ? 'active' : ''" @click="type = '钢铁'">
+                            钢铁
+                        </li>
+                        <li :class="type == '有色' ? 'active' : ''" @click="type = '有色'">
+                            有色
+                        </li>
+                    </ul>
+                    <div id="ssfhzs"></div>
+                </div>
+                <div class="ynl">
+                    <p class="title">用能量</p>
+                    <!-- <ul class="typeBox">
+                        <li :class="type == '电' ? 'active' : ''" @click="type = '电'">
+                            电
+                        </li>
+                        <li :class="type == '水' ? 'active' : ''" @click="type = '水'">
+                            水
+                        </li>
+                        <li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
+                            蒸汽
+                        </li>
+                    </ul> -->
+                    <div id="ynl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="tyjg">
+                    <p class="title">碳源结构</p>
+                    <div id="tyjg">
+                        <div class="t_content">
+                            <div v-for="(item, index) in controls1" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                            <div v-for="(item, index) in controls2" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                        align-content: space-between;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103655.vue b/.history/src/views/TAN_20231130103655.vue
new file mode 100644
index 0000000..c41afa9
--- /dev/null
+++ b/.history/src/views/TAN_20231130103655.vue
@@ -0,0 +1,1557 @@
+<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>
+                            <div v-for="(item, index) in controls1" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                            <div>
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                            <div class="right"></div>
+                            <div v-for="(item, index) in controls2" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                        align-content: space-between;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103706.vue b/.history/src/views/TAN_20231130103706.vue
new file mode 100644
index 0000000..3ea9479
--- /dev/null
+++ b/.history/src/views/TAN_20231130103706.vue
@@ -0,0 +1,1558 @@
+<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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                            <div class="cen_img">
+                                <img src="../assets/tan/组 3141.png" alt="">
+                            </div>
+                            <div class="right"></div>
+                            <div v-for="(item, index) in controls2" :key="index" class="t_con">
+                                <p class="t_name">{{ item.name }}</p>
+                                <p><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>
+                                <p></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                        align-content: space-between;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103719.vue b/.history/src/views/TAN_20231130103719.vue
new file mode 100644
index 0000000..3692b15
--- /dev/null
+++ b/.history/src/views/TAN_20231130103719.vue
@@ -0,0 +1,1559 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            controls: [
+                {
+                    name: "电（万度）",
+                    count: "4566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "汽油（万升）",
+                    count: "2566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "水（万吨）",
+                    count: "5566",
+                    isShow: false,
+                    percent: "10",
+                },
+                {
+                    name: "柴油（万升）",
+                    count: "6566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "燃气（立方）",
+                    count: "7566",
+                    isShow: true,
+                    percent: "10",
+                },
+                {
+                    name: "煤（吨）",
+                    count: "4566",
+                    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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                        align-content: space-between;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103827.vue b/.history/src/views/TAN_20231130103827.vue
new file mode 100644
index 0000000..c67b6e8
--- /dev/null
+++ b/.history/src/views/TAN_20231130103827.vue
@@ -0,0 +1,1563 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: flex-start;
+                        flex-wrap: wrap;
+                        align-content: space-between;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130103911.vue b/.history/src/views/TAN_20231130103911.vue
new file mode 100644
index 0000000..8414444
--- /dev/null
+++ b/.history/src/views/TAN_20231130103911.vue
@@ -0,0 +1,1563 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        flex-wrap: wrap;
+                        align-content: space-between;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104042.vue b/.history/src/views/TAN_20231130104042.vue
new file mode 100644
index 0000000..35bccbe
--- /dev/null
+++ b/.history/src/views/TAN_20231130104042.vue
@@ -0,0 +1,1563 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        align-content: space-between;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104115.vue b/.history/src/views/TAN_20231130104115.vue
new file mode 100644
index 0000000..d8e796f
--- /dev/null
+++ b/.history/src/views/TAN_20231130104115.vue
@@ -0,0 +1,1563 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        // align-content: space-between;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        box-shadow: inset 16px 10px 39px 12px #6BFFFE;
+                        border-radius: 4px 4px 4px 4px;
+                        opacity: .5;
+                        padding: 2px;
+                        border: 1px solid #061A4D;
+                        box-sizing: border-box;
+
+                        .t_name {
+                            width: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104138.vue b/.history/src/views/TAN_20231130104138.vue
new file mode 100644
index 0000000..b2c5019
--- /dev/null
+++ b/.history/src/views/TAN_20231130104138.vue
@@ -0,0 +1,1563 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        // align-content: space-between;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104206.vue b/.history/src/views/TAN_20231130104206.vue
new file mode 100644
index 0000000..b2c5019
--- /dev/null
+++ b/.history/src/views/TAN_20231130104206.vue
@@ -0,0 +1,1563 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        // align-content: space-between;
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104256.vue b/.history/src/views/TAN_20231130104256.vue
new file mode 100644
index 0000000..fe41380
--- /dev/null
+++ b/.history/src/views/TAN_20231130104256.vue
@@ -0,0 +1,1568 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+                    }
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104310.vue b/.history/src/views/TAN_20231130104310.vue
new file mode 100644
index 0000000..18083a7
--- /dev/null
+++ b/.history/src/views/TAN_20231130104310.vue
@@ -0,0 +1,1569 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+                    }
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104340.vue b/.history/src/views/TAN_20231130104340.vue
new file mode 100644
index 0000000..dc5a6a6
--- /dev/null
+++ b/.history/src/views/TAN_20231130104340.vue
@@ -0,0 +1,1576 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+                        img{
+                            width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+                        }
+                    }
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104342.vue b/.history/src/views/TAN_20231130104342.vue
new file mode 100644
index 0000000..3eed164
--- /dev/null
+++ b/.history/src/views/TAN_20231130104342.vue
@@ -0,0 +1,1579 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104446.vue b/.history/src/views/TAN_20231130104446.vue
new file mode 100644
index 0000000..0a361d8
--- /dev/null
+++ b/.history/src/views/TAN_20231130104446.vue
@@ -0,0 +1,1580 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104550.vue b/.history/src/views/TAN_20231130104550.vue
new file mode 100644
index 0000000..5dcb98d
--- /dev/null
+++ b/.history/src/views/TAN_20231130104550.vue
@@ -0,0 +1,1580 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        // 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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104601.vue b/.history/src/views/TAN_20231130104601.vue
new file mode 100644
index 0000000..0a361d8
--- /dev/null
+++ b/.history/src/views/TAN_20231130104601.vue
@@ -0,0 +1,1580 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104612.vue b/.history/src/views/TAN_20231130104612.vue
new file mode 100644
index 0000000..5eb7c65
--- /dev/null
+++ b/.history/src/views/TAN_20231130104612.vue
@@ -0,0 +1,1581 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 5px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104620.vue b/.history/src/views/TAN_20231130104620.vue
new file mode 100644
index 0000000..bb19977
--- /dev/null
+++ b/.history/src/views/TAN_20231130104620.vue
@@ -0,0 +1,1581 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 10px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104657.vue b/.history/src/views/TAN_20231130104657.vue
new file mode 100644
index 0000000..b06b3d7
--- /dev/null
+++ b/.history/src/views/TAN_20231130104657.vue
@@ -0,0 +1,1591 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 10px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .t_img1 {
+                            color: #0CD9B5;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104716.vue b/.history/src/views/TAN_20231130104716.vue
new file mode 100644
index 0000000..0071251
--- /dev/null
+++ b/.history/src/views/TAN_20231130104716.vue
@@ -0,0 +1,1597 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 10px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .t_img2 {
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104731.vue b/.history/src/views/TAN_20231130104731.vue
new file mode 100644
index 0000000..264cd84
--- /dev/null
+++ b/.history/src/views/TAN_20231130104731.vue
@@ -0,0 +1,1603 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 10px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .t_img2 {
+                            width: 25px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            line-height: 36px;
+                            color: #F71F1F;
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104746.vue b/.history/src/views/TAN_20231130104746.vue
new file mode 100644
index 0000000..723eaa8
--- /dev/null
+++ b/.history/src/views/TAN_20231130104746.vue
@@ -0,0 +1,1607 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 10px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .t_img2 {
+                            width: 25px;
+                            height: 36px;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            line-height: 36px;
+                            color: #F71F1F;
+                            img{
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104815.vue b/.history/src/views/TAN_20231130104815.vue
new file mode 100644
index 0000000..e2f5dac
--- /dev/null
+++ b/.history/src/views/TAN_20231130104815.vue
@@ -0,0 +1,1608 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 10px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                            img{
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104820.vue b/.history/src/views/TAN_20231130104820.vue
new file mode 100644
index 0000000..bc082d8
--- /dev/null
+++ b/.history/src/views/TAN_20231130104820.vue
@@ -0,0 +1,1609 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 10px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .t_img1 {
+                            width: 25px;
+                            height: 36px;
+                            padding: 0;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #0CD9B5;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                            img{
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104823.vue b/.history/src/views/TAN_20231130104823.vue
new file mode 100644
index 0000000..2d9b855
--- /dev/null
+++ b/.history/src/views/TAN_20231130104823.vue
@@ -0,0 +1,1610 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 10px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_count {
+                            padding: 0;
+                            width: 42px;
+                            height: 36px;
+                            font-size: 18px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 500;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .t_img1 {
+                            width: 25px;
+                            height: 36px;
+                            padding: 0;
+                            font-size: 12px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #0CD9B5;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                            img{
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104841.vue b/.history/src/views/TAN_20231130104841.vue
new file mode 100644
index 0000000..266a4ad
--- /dev/null
+++ b/.history/src/views/TAN_20231130104841.vue
@@ -0,0 +1,1609 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        padding: 0;
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 10px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                            img{
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104903.vue b/.history/src/views/TAN_20231130104903.vue
new file mode 100644
index 0000000..067157b
--- /dev/null
+++ b/.history/src/views/TAN_20231130104903.vue
@@ -0,0 +1,1609 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .t_content {
+                        width: 100%;
+                        height: 300px;
+                        display: flex;
+                        justify-content: space-around;
+                        // flex-wrap: wrap;
+                        padding-top: 50px;
+                        // align-content: space-between;
+                    }
+
+                    .cen_img {
+                        width: 159px;
+                        height: 159px;
+                        border: none;
+                        display: block;
+                        margin: 0 auto;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        padding-top: 0px;
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 10px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                            img{
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104933.vue b/.history/src/views/TAN_20231130104933.vue
new file mode 100644
index 0000000..4497b39
--- /dev/null
+++ b/.history/src/views/TAN_20231130104933.vue
@@ -0,0 +1,1607 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 10px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                            img{
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104945.vue b/.history/src/views/TAN_20231130104945.vue
new file mode 100644
index 0000000..c6fd8da
--- /dev/null
+++ b/.history/src/views/TAN_20231130104945.vue
@@ -0,0 +1,1607 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 20px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                            img{
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130104951.vue b/.history/src/views/TAN_20231130104951.vue
new file mode 100644
index 0000000..608e40f
--- /dev/null
+++ b/.history/src/views/TAN_20231130104951.vue
@@ -0,0 +1,1607 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 40px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                            img{
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105000.vue b/.history/src/views/TAN_20231130105000.vue
new file mode 100644
index 0000000..1a9d7f8
--- /dev/null
+++ b/.history/src/views/TAN_20231130105000.vue
@@ -0,0 +1,1607 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                            img{
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105009.vue b/.history/src/views/TAN_20231130105009.vue
new file mode 100644
index 0000000..c6fd8da
--- /dev/null
+++ b/.history/src/views/TAN_20231130105009.vue
@@ -0,0 +1,1607 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 20px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                            img{
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105044.vue b/.history/src/views/TAN_20231130105044.vue
new file mode 100644
index 0000000..4b697c0
--- /dev/null
+++ b/.history/src/views/TAN_20231130105044.vue
@@ -0,0 +1,1609 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 20px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                            img{
+                                width: 12px;
+                                height: 12px;
+                            }
+                        }
+                    }
+                    .t_con:nth-child(n+2){
+                        margin-top: 60px;
+                    }
+                }
+            }
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105058.vue b/.history/src/views/TAN_20231130105058.vue
new file mode 100644
index 0000000..50ab1f4
--- /dev/null
+++ b/.history/src/views/TAN_20231130105058.vue
@@ -0,0 +1,1609 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        img {
+                            width: 159px;
+                            height: 159px;
+                            border: none;
+                            display: block;
+                            margin: 0 auto;
+                        }
+                    }
+                    .t_con {
+                        width: 106px;
+                        height: 52px;
+                        margin-left: 20px;
+                        margin-top: 20px;
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                            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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105110.vue b/.history/src/views/TAN_20231130105110.vue
new file mode 100644
index 0000000..1860c49
--- /dev/null
+++ b/.history/src/views/TAN_20231130105110.vue
@@ -0,0 +1,1609 @@
+<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><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>
+                                    <p></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><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>
+                                    <p></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                            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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105249.vue b/.history/src/views/TAN_20231130105249.vue
new file mode 100644
index 0000000..8e3960d
--- /dev/null
+++ b/.history/src/views/TAN_20231130105249.vue
@@ -0,0 +1,1610 @@
+<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><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>
+                                    <p></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>
+                                    <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>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+
+                            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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105301.vue b/.history/src/views/TAN_20231130105301.vue
new file mode 100644
index 0000000..56bc683
--- /dev/null
+++ b/.history/src/views/TAN_20231130105301.vue
@@ -0,0 +1,1608 @@
+<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>
+                                    <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>
+                                </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>
+                                    <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>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+
+                            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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105303.vue b/.history/src/views/TAN_20231130105303.vue
new file mode 100644
index 0000000..56bc683
--- /dev/null
+++ b/.history/src/views/TAN_20231130105303.vue
@@ -0,0 +1,1608 @@
+<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>
+                                    <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>
+                                </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>
+                                    <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>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+
+                            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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105347.vue b/.history/src/views/TAN_20231130105347.vue
new file mode 100644
index 0000000..51aac62
--- /dev/null
+++ b/.history/src/views/TAN_20231130105347.vue
@@ -0,0 +1,1609 @@
+<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>
+                                    <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>
+                                </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>
+                                    <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>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                            display: block;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+
+                            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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105353.vue b/.history/src/views/TAN_20231130105353.vue
new file mode 100644
index 0000000..b8136ac
--- /dev/null
+++ b/.history/src/views/TAN_20231130105353.vue
@@ -0,0 +1,1609 @@
+<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>
+                                    <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>
+                                </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>
+                                    <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>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                            display: inline-block;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+
+                            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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105401.vue b/.history/src/views/TAN_20231130105401.vue
new file mode 100644
index 0000000..3fed2e0
--- /dev/null
+++ b/.history/src/views/TAN_20231130105401.vue
@@ -0,0 +1,1611 @@
+<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>
+                                    <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>
+                                </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>
+                                    <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>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                            display: inline-block;
+                        }
+
+                        .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: inline-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: inline-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;
+
+                            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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105404.vue b/.history/src/views/TAN_20231130105404.vue
new file mode 100644
index 0000000..7de7c96
--- /dev/null
+++ b/.history/src/views/TAN_20231130105404.vue
@@ -0,0 +1,1612 @@
+<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>
+                                    <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>
+                                </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>
+                                    <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>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ynflzb">
+                    <p class="title">用能分类占比</p>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                            display: inline-block;
+                        }
+
+                        .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: inline-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: inline-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: inline-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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105443.vue b/.history/src/views/TAN_20231130105443.vue
new file mode 100644
index 0000000..1cbe943
--- /dev/null
+++ b/.history/src/views/TAN_20231130105443.vue
@@ -0,0 +1,1610 @@
+<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><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><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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+
+                            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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105456.vue b/.history/src/views/TAN_20231130105456.vue
new file mode 100644
index 0000000..0bd0e55
--- /dev/null
+++ b/.history/src/views/TAN_20231130105456.vue
@@ -0,0 +1,1610 @@
+<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><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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+
+                            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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105508.vue b/.history/src/views/TAN_20231130105508.vue
new file mode 100644
index 0000000..00fbf86
--- /dev/null
+++ b/.history/src/views/TAN_20231130105508.vue
@@ -0,0 +1,1610 @@
+<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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 60px;
+                            height: 36px;
+                            font-size: 12px;
+                            // font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 350;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+                        }
+
+                        .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;
+
+                            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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105608.vue b/.history/src/views/TAN_20231130105608.vue
new file mode 100644
index 0000000..56d6a3b
--- /dev/null
+++ b/.history/src/views/TAN_20231130105608.vue
@@ -0,0 +1,1614 @@
+<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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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.footer {
+                            display: flex;
+                            
+                            .t_name {
+                                width: 60px;
+                                height: 36px;
+                                font-size: 12px;
+                                // font-family: Source Han Sans, Source Han Sans;
+                                font-weight: 350;
+                                color: #FFFFFF;
+                                line-height: 36px;
+                            }
+
+                            .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;
+                            }
+
+                            .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;
+                            }
+
+                            .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;
+
+                                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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105609.vue b/.history/src/views/TAN_20231130105609.vue
new file mode 100644
index 0000000..56d6a3b
--- /dev/null
+++ b/.history/src/views/TAN_20231130105609.vue
@@ -0,0 +1,1614 @@
+<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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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.footer {
+                            display: flex;
+                            
+                            .t_name {
+                                width: 60px;
+                                height: 36px;
+                                font-size: 12px;
+                                // font-family: Source Han Sans, Source Han Sans;
+                                font-weight: 350;
+                                color: #FFFFFF;
+                                line-height: 36px;
+                            }
+
+                            .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;
+                            }
+
+                            .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;
+                            }
+
+                            .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;
+
+                                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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105617.vue b/.history/src/views/TAN_20231130105617.vue
new file mode 100644
index 0000000..ac765e2
--- /dev/null
+++ b/.history/src/views/TAN_20231130105617.vue
@@ -0,0 +1,1614 @@
+<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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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.footer {
+                            display: flex;
+                            .t_name {
+                                width: 60px;
+                                height: 36px;
+                                font-size: 12px;
+                                // font-family: Source Han Sans, Source Han Sans;
+                                font-weight: 350;
+                                color: #FFFFFF;
+                                line-height: 36px;
+                                display: block;
+                            }
+
+                            .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;
+                            }
+
+                            .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;
+                            }
+
+                            .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;
+
+                                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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105625.vue b/.history/src/views/TAN_20231130105625.vue
new file mode 100644
index 0000000..4fdbd8a
--- /dev/null
+++ b/.history/src/views/TAN_20231130105625.vue
@@ -0,0 +1,1615 @@
+<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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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.footer {
+                            display: flex;
+                            .t_name {
+                                width: 60px;
+                                height: 36px;
+                                font-size: 12px;
+                                // font-family: Source Han Sans, Source Han Sans;
+                                font-weight: 350;
+                                color: #FFFFFF;
+                                line-height: 36px;
+                                display: block;
+                            }
+
+                            .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;
+                            }
+
+                            .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;
+
+                                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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105635.vue b/.history/src/views/TAN_20231130105635.vue
new file mode 100644
index 0000000..55b135e
--- /dev/null
+++ b/.history/src/views/TAN_20231130105635.vue
@@ -0,0 +1,1617 @@
+<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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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.footer {
+                            display: flex;
+                            .t_name {
+                                width: 60px;
+                                height: 36px;
+                                font-size: 12px;
+                                // font-family: Source Han Sans, Source Han Sans;
+                                font-weight: 350;
+                                color: #FFFFFF;
+                                line-height: 36px;
+                                display: block;
+                            }
+
+                            .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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130105657.vue b/.history/src/views/TAN_20231130105657.vue
new file mode 100644
index 0000000..7ba03dc
--- /dev/null
+++ b/.history/src/views/TAN_20231130105657.vue
@@ -0,0 +1,1619 @@
+<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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 60px;
+                            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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130112744.vue b/.history/src/views/TAN_20231130112744.vue
new file mode 100644
index 0000000..5ff2524
--- /dev/null
+++ b/.history/src/views/TAN_20231130112744.vue
@@ -0,0 +1,1619 @@
+<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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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;
+
+                        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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130112828.vue b/.history/src/views/TAN_20231130112828.vue
new file mode 100644
index 0000000..a86eca4
--- /dev/null
+++ b/.history/src/views/TAN_20231130112828.vue
@@ -0,0 +1,1619 @@
+<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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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: 100px;
+                        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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130112834.vue b/.history/src/views/TAN_20231130112834.vue
new file mode 100644
index 0000000..6d5eb1c
--- /dev/null
+++ b/.history/src/views/TAN_20231130112834.vue
@@ -0,0 +1,1619 @@
+<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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .centers {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 50px;
+                    top: 36px;
+                    // text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: 81px;
+                        height: 25px;
+                        font-size: 24;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: 22px;
+                        position: absolute;
+                        left: 50px;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 217px;
+                        height: 126px;
+                    }
+                }
+
+                .insides {
+                    margin-top: 56px;
+                    width: 436px;
+                    height: 294px;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            height: 60px;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: 22px;
+                            font-size: 14;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: 22px;
+                        }
+                    }
+                }
+            }
+
+            .ssfhzs {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    right: 20px;
+                    // left: 50%;
+                    // transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ssfhzs {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+            .ynl {
+                height: 325px;
+                background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+                background-size: cover;
+                margin-top: 6px;
+
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 190px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    // font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    li {
+                        width: 39px;
+                        height: 21px;
+                        background: rgba(29, 29, 29, 0.5);
+                        border-radius: 2px 2px 2px 2px;
+                        font-size: 14px;
+                        border: 1px solid #666666;
+                        text-align: center;
+                        margin: 2.5px;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: rgba(10, 167, 255, 0.3);
+                        border: 1px solid #0aa7ff;
+                    }
+                }
+
+                #ynl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .tyjg {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/tan/组\ 3142.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #tyjg {
+                    width: 100%;
+                    height: 100%;
+
+                    .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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130112935.vue b/.history/src/views/TAN_20231130112935.vue
new file mode 100644
index 0000000..a77f757
--- /dev/null
+++ b/.history/src/views/TAN_20231130112935.vue
@@ -0,0 +1,1285 @@
+<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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130112939.vue b/.history/src/views/TAN_20231130112939.vue
new file mode 100644
index 0000000..78a347f
--- /dev/null
+++ b/.history/src/views/TAN_20231130112939.vue
@@ -0,0 +1,1286 @@
+<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>
+                    <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+                    <div id="ynflzb"></div>
+                </div>
+                <div class="qyydlpm">
+                    <p class="title">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130130909.vue b/.history/src/views/TAN_20231130130909.vue
new file mode 100644
index 0000000..5ebe83d
--- /dev/null
+++ b/.history/src/views/TAN_20231130130909.vue
@@ -0,0 +1,1285 @@
+<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">企业用电量排名</p>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131015.vue b/.history/src/views/TAN_20231130131015.vue
new file mode 100644
index 0000000..9b79da0
--- /dev/null
+++ b/.history/src/views/TAN_20231130131015.vue
@@ -0,0 +1,1285 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131132.vue b/.history/src/views/TAN_20231130131132.vue
new file mode 100644
index 0000000..57783c2
--- /dev/null
+++ b/.history/src/views/TAN_20231130131132.vue
@@ -0,0 +1,1296 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 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;
+
+                    .danwei {
+                        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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131137.vue b/.history/src/views/TAN_20231130131137.vue
new file mode 100644
index 0000000..49e443a
--- /dev/null
+++ b/.history/src/views/TAN_20231130131137.vue
@@ -0,0 +1,1296 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 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;
+                    display: flex;
+                    .danwei {
+                        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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131320.vue b/.history/src/views/TAN_20231130131320.vue
new file mode 100644
index 0000000..a039f58
--- /dev/null
+++ b/.history/src/views/TAN_20231130131320.vue
@@ -0,0 +1,1297 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 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;
+                }
+                .danwei {
+                    position: absolute;
+                    right: 30px;
+                    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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131347.vue b/.history/src/views/TAN_20231130131347.vue
new file mode 100644
index 0000000..15168ce
--- /dev/null
+++ b/.history/src/views/TAN_20231130131347.vue
@@ -0,0 +1,1298 @@
+<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">企业碳排放量排名</p>
+                    <span class="danwei">单位（万吨）</span>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 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;
+                }
+                .danwei {
+                    position: absolute;
+                    right: 30px;
+                    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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131426.vue b/.history/src/views/TAN_20231130131426.vue
new file mode 100644
index 0000000..05a4a71
--- /dev/null
+++ b/.history/src/views/TAN_20231130131426.vue
@@ -0,0 +1,1298 @@
+<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">企业碳排放量排名</p>
+                    <span class="danwei">单位（万吨）</span>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 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;
+                }
+                .danwei {
+                    position: absolute;
+                    right: 3=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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131438.vue b/.history/src/views/TAN_20231130131438.vue
new file mode 100644
index 0000000..1f048e5
--- /dev/null
+++ b/.history/src/views/TAN_20231130131438.vue
@@ -0,0 +1,1299 @@
+<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">企业碳排放量排名</p>
+                    <span class="danwei">单位（万吨）</span>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 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;
+                }
+                .danwei {
+                    position: absolute;
+                    right: 50px;
+                    top: 22px;
+                    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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131458.vue b/.history/src/views/TAN_20231130131458.vue
new file mode 100644
index 0000000..af3b05b
--- /dev/null
+++ b/.history/src/views/TAN_20231130131458.vue
@@ -0,0 +1,1299 @@
+<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">企业碳排放量排名</p>
+                    <span class="danwei">单位（万吨）</span>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 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;
+                }
+                .danwei {
+                    position: absolute;
+                    right: 50px;
+                    top: 11px;
+                    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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131527.vue b/.history/src/views/TAN_20231130131527.vue
new file mode 100644
index 0000000..758019c
--- /dev/null
+++ b/.history/src/views/TAN_20231130131527.vue
@@ -0,0 +1,1299 @@
+<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">企业碳排放量排名</p>
+                    <span class="danwei">单位（万吨）</span>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 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;
+                }
+                .danwei {
+                    position: absolute;
+                    right: 50px;
+                    top: 6px;
+                    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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131638.vue b/.history/src/views/TAN_20231130131638.vue
new file mode 100644
index 0000000..7218f12
--- /dev/null
+++ b/.history/src/views/TAN_20231130131638.vue
@@ -0,0 +1,1299 @@
+<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">企业碳排放量排名</p>
+                    <span class="danwei">单位（万吨）</span>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 160px;
+                    width: 196px;
+                    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;
+                }
+                .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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131652.vue b/.history/src/views/TAN_20231130131652.vue
new file mode 100644
index 0000000..9729c94
--- /dev/null
+++ b/.history/src/views/TAN_20231130131652.vue
@@ -0,0 +1,1300 @@
+<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">企业碳排放量排名</p>
+                    <span class="danwei">单位（万吨）</span>
+                    <ul class="list">
+                        <li v-for="(item, index) in list" :style="listClass(index)">
+                            <p>{{ index + 1 }}</p>
+                            <p>{{ item.name }}</p>
+                            <p>{{ item.value }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer"></div>
+        </div>
+    </div>
+</template>
+<script>
+// import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 160px;
+                    width: 196px;
+                    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;
+
+                    .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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131704.vue b/.history/src/views/TAN_20231130131704.vue
new file mode 100644
index 0000000..11ffb2b
--- /dev/null
+++ b/.history/src/views/TAN_20231130131704.vue
@@ -0,0 +1,1299 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 160px;
+                    width: 196px;
+                    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;
+
+                    .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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131708.vue b/.history/src/views/TAN_20231130131708.vue
new file mode 100644
index 0000000..6246b19
--- /dev/null
+++ b/.history/src/views/TAN_20231130131708.vue
@@ -0,0 +1,1299 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 160px;
+                    width: 196px;
+                    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;
+
+                    .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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131733.vue b/.history/src/views/TAN_20231130131733.vue
new file mode 100644
index 0000000..cacda70
--- /dev/null
+++ b/.history/src/views/TAN_20231130131733.vue
@@ -0,0 +1,1299 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 160px;
+                    width: 216px;
+                    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;
+
+                    .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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131751.vue b/.history/src/views/TAN_20231130131751.vue
new file mode 100644
index 0000000..8d5e0f9
--- /dev/null
+++ b/.history/src/views/TAN_20231130131751.vue
@@ -0,0 +1,1299 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 150px;
+                    width: 216px;
+                    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;
+
+                    .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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131803.vue b/.history/src/views/TAN_20231130131803.vue
new file mode 100644
index 0000000..086919b
--- /dev/null
+++ b/.history/src/views/TAN_20231130131803.vue
@@ -0,0 +1,1299 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 150px;
+                    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;
+
+                    .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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131805.vue b/.history/src/views/TAN_20231130131805.vue
new file mode 100644
index 0000000..58ee4e0
--- /dev/null
+++ b/.history/src/views/TAN_20231130131805.vue
@@ -0,0 +1,1299 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 130px;
+                    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;
+
+                    .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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131833.vue b/.history/src/views/TAN_20231130131833.vue
new file mode 100644
index 0000000..1d02ff8
--- /dev/null
+++ b/.history/src/views/TAN_20231130131833.vue
@@ -0,0 +1,1299 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 160px;
+                    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;
+
+                    .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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131847.vue b/.history/src/views/TAN_20231130131847.vue
new file mode 100644
index 0000000..03aa01d
--- /dev/null
+++ b/.history/src/views/TAN_20231130131847.vue
@@ -0,0 +1,1299 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 160px;
+                    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;
+
+                    .danwei {
+                        // position: absolute;
+                        // right: 50px;
+                        width: 45px;
+                        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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131849.vue b/.history/src/views/TAN_20231130131849.vue
new file mode 100644
index 0000000..1d02ff8
--- /dev/null
+++ b/.history/src/views/TAN_20231130131849.vue
@@ -0,0 +1,1299 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 160px;
+                    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;
+
+                    .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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131907.vue b/.history/src/views/TAN_20231130131907.vue
new file mode 100644
index 0000000..ae79d79
--- /dev/null
+++ b/.history/src/views/TAN_20231130131907.vue
@@ -0,0 +1,1300 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 160px;
+                    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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131932.vue b/.history/src/views/TAN_20231130131932.vue
new file mode 100644
index 0000000..18c02ad
--- /dev/null
+++ b/.history/src/views/TAN_20231130131932.vue
@@ -0,0 +1,1300 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 145px;
+                    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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130131947.vue b/.history/src/views/TAN_20231130131947.vue
new file mode 100644
index 0000000..d21f922
--- /dev/null
+++ b/.history/src/views/TAN_20231130131947.vue
@@ -0,0 +1,1300 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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: 145px;
+                    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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132014.vue b/.history/src/views/TAN_20231130132014.vue
new file mode 100644
index 0000000..82c9f88
--- /dev/null
+++ b/.history/src/views/TAN_20231130132014.vue
@@ -0,0 +1,1300 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132203.vue b/.history/src/views/TAN_20231130132203.vue
new file mode 100644
index 0000000..80ed190
--- /dev/null
+++ b/.history/src/views/TAN_20231130132203.vue
@@ -0,0 +1,1305 @@
+<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>
+                
+            </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132215.vue b/.history/src/views/TAN_20231130132215.vue
new file mode 100644
index 0000000..beed86f
--- /dev/null
+++ b/.history/src/views/TAN_20231130132215.vue
@@ -0,0 +1,1306 @@
+<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>
+        </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132239.vue b/.history/src/views/TAN_20231130132239.vue
new file mode 100644
index 0000000..b7cdcfb
--- /dev/null
+++ b/.history/src/views/TAN_20231130132239.vue
@@ -0,0 +1,1309 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132256.vue b/.history/src/views/TAN_20231130132256.vue
new file mode 100644
index 0000000..ed2644b
--- /dev/null
+++ b/.history/src/views/TAN_20231130132256.vue
@@ -0,0 +1,1309 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132259.vue b/.history/src/views/TAN_20231130132259.vue
new file mode 100644
index 0000000..2d8c418
--- /dev/null
+++ b/.history/src/views/TAN_20231130132259.vue
@@ -0,0 +1,1309 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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%);
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132320.vue b/.history/src/views/TAN_20231130132320.vue
new file mode 100644
index 0000000..da542e6
--- /dev/null
+++ b/.history/src/views/TAN_20231130132320.vue
@@ -0,0 +1,1310 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132427.vue b/.history/src/views/TAN_20231130132427.vue
new file mode 100644
index 0000000..9dddc88
--- /dev/null
+++ b/.history/src/views/TAN_20231130132427.vue
@@ -0,0 +1,1314 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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-around;
+            .qyhyfb{
+                width: 492px;
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132429.vue b/.history/src/views/TAN_20231130132429.vue
new file mode 100644
index 0000000..01189f3
--- /dev/null
+++ b/.history/src/views/TAN_20231130132429.vue
@@ -0,0 +1,1314 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132442.vue b/.history/src/views/TAN_20231130132442.vue
new file mode 100644
index 0000000..7619e45
--- /dev/null
+++ b/.history/src/views/TAN_20231130132442.vue
@@ -0,0 +1,1317 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+            }
+            .hytpfzl{
+                width: 492px;
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132628.vue b/.history/src/views/TAN_20231130132628.vue
new file mode 100644
index 0000000..932ee2b
--- /dev/null
+++ b/.history/src/views/TAN_20231130132628.vue
@@ -0,0 +1,1319 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                background: url(../assets/tan/组\ 3126.png);
+                background-size: cover;
+            }
+            .hytpfzl{
+                width: 492px;
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132657.vue b/.history/src/views/TAN_20231130132657.vue
new file mode 100644
index 0000000..62679d0
--- /dev/null
+++ b/.history/src/views/TAN_20231130132657.vue
@@ -0,0 +1,1323 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                background: url(../assets/tan/组\ 3126.png);
+                background-size: cover;
+            }
+
+            .hytpfzl {
+                width: 492px;
+                background: url(../assets/tan/组\ 3126.png);
+                background-size: cover;
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132757.vue b/.history/src/views/TAN_20231130132757.vue
new file mode 100644
index 0000000..e7d3855
--- /dev/null
+++ b/.history/src/views/TAN_20231130132757.vue
@@ -0,0 +1,1349 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+
+            .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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130132801.vue b/.history/src/views/TAN_20231130132801.vue
new file mode 100644
index 0000000..7a2cb75
--- /dev/null
+++ b/.history/src/views/TAN_20231130132801.vue
@@ -0,0 +1,1351 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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();
+            });
+        },
+
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+
+            .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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130133053.vue b/.history/src/views/TAN_20231130133053.vue
new file mode 100644
index 0000000..9fe6304
--- /dev/null
+++ b/.history/src/views/TAN_20231130133053.vue
@@ -0,0 +1,1473 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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: "#fff",
+                        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("yhhyzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+
+            .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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130133331.vue b/.history/src/views/TAN_20231130133331.vue
new file mode 100644
index 0000000..8a8e75e
--- /dev/null
+++ b/.history/src/views/TAN_20231130133331.vue
@@ -0,0 +1,1477 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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: "#fff",
+                        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("yhhyzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130133407.vue b/.history/src/views/TAN_20231130133407.vue
new file mode 100644
index 0000000..0782751
--- /dev/null
+++ b/.history/src/views/TAN_20231130133407.vue
@@ -0,0 +1,1478 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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: "#fff",
+                        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("yhhyzb", option);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130133419.vue b/.history/src/views/TAN_20231130133419.vue
new file mode 100644
index 0000000..4878d7f
--- /dev/null
+++ b/.history/src/views/TAN_20231130133419.vue
@@ -0,0 +1,1478 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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: "#fff",
+                        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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130133425.vue b/.history/src/views/TAN_20231130133425.vue
new file mode 100644
index 0000000..db7f7c9
--- /dev/null
+++ b/.history/src/views/TAN_20231130133425.vue
@@ -0,0 +1,1479 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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: "#fff",
+                        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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130134159.vue b/.history/src/views/TAN_20231130134159.vue
new file mode 100644
index 0000000..f3de0bc
--- /dev/null
+++ b/.history/src/views/TAN_20231130134159.vue
@@ -0,0 +1,1479 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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: "#fff",
+                        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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130134305.vue b/.history/src/views/TAN_20231130134305.vue
new file mode 100644
index 0000000..f128c83
--- /dev/null
+++ b/.history/src/views/TAN_20231130134305.vue
@@ -0,0 +1,1479 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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: "#fff",
+                        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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130134321.vue b/.history/src/views/TAN_20231130134321.vue
new file mode 100644
index 0000000..7862083
--- /dev/null
+++ b/.history/src/views/TAN_20231130134321.vue
@@ -0,0 +1,1480 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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: "#fff",
+                        rich: {
+                            name: {
+                                color:"#fff",
+                                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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130134329.vue b/.history/src/views/TAN_20231130134329.vue
new file mode 100644
index 0000000..6077a94
--- /dev/null
+++ b/.history/src/views/TAN_20231130134329.vue
@@ -0,0 +1,1481 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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: "#fff",
+                        rich: {
+                            name: {
+                                color:"#fff",
+                                fontSize: fontSizeRem(12),
+                            },
+                            value: {
+                                color:"#",
+                                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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130134349.vue b/.history/src/views/TAN_20231130134349.vue
new file mode 100644
index 0000000..8fd76d3
--- /dev/null
+++ b/.history/src/views/TAN_20231130134349.vue
@@ -0,0 +1,1482 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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: "#fff",
+                        rich: {
+                            name: {
+                                color:"#fff",
+                                fontSize: fontSizeRem(12),
+                            },
+                            value: {
+                                color:"#",
+                                fontSize: fontSizeRem(16),
+                                padding: [0, 5, 0, 15],
+                            },
+                            unit: {
+                                color:"#",
+                                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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130134414.vue b/.history/src/views/TAN_20231130134414.vue
new file mode 100644
index 0000000..1d40b30
--- /dev/null
+++ b/.history/src/views/TAN_20231130134414.vue
@@ -0,0 +1,1482 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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: "#fff",
+                        rich: {
+                            name: {
+                                color:"#fff",
+                                fontSize: fontSizeRem(12),
+                            },
+                            value: {
+                                color:"#fff",
+                                fontSize: fontSizeRem(16),
+                                padding: [0, 5, 0, 15],
+                            },
+                            unit: {
+                                color:"#fff",
+                                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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130134442.vue b/.history/src/views/TAN_20231130134442.vue
new file mode 100644
index 0000000..58f86c2
--- /dev/null
+++ b/.history/src/views/TAN_20231130134442.vue
@@ -0,0 +1,1479 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130140249.vue b/.history/src/views/TAN_20231130140249.vue
new file mode 100644
index 0000000..3882844
--- /dev/null
+++ b/.history/src/views/TAN_20231130140249.vue
@@ -0,0 +1,1576 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+        // 行业碳排放总量
+        initTpfzl() {
+
+            const value = 80;
+            const rate = Math.round(value * 100 / 100);
+            option = {
+                backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    {
+                        text: "单位：%",
+                        top: 0,
+                        left: 0,
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 16,
+                            color: "#fff",
+                        },
+                    },
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '赋值覆盖率',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            }
+
+
+        }
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130140407.vue b/.history/src/views/TAN_20231130140407.vue
new file mode 100644
index 0000000..44e3792
--- /dev/null
+++ b/.history/src/views/TAN_20231130140407.vue
@@ -0,0 +1,1574 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+        // 行业碳排放总量
+        initTpfzl() {
+            const value = 80;
+            const rate = Math.round(value * 100 / 100);
+            option = {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '赋值覆盖率',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            }
+
+        }
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130140426.vue b/.history/src/views/TAN_20231130140426.vue
new file mode 100644
index 0000000..a61d73e
--- /dev/null
+++ b/.history/src/views/TAN_20231130140426.vue
@@ -0,0 +1,1574 @@
+<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>
+                </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],
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+        // 行业碳排放总量
+        initTpfzl() {
+            const value = 80;
+            const rate = Math.round(value * 100 / 100);
+            option = {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            }
+
+        }
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130140609.vue b/.history/src/views/TAN_20231130140609.vue
new file mode 100644
index 0000000..14dcc16
--- /dev/null
+++ b/.history/src/views/TAN_20231130140609.vue
@@ -0,0 +1,2013 @@
+<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>
+                </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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130140636.vue b/.history/src/views/TAN_20231130140636.vue
new file mode 100644
index 0000000..d19fd7d
--- /dev/null
+++ b/.history/src/views/TAN_20231130140636.vue
@@ -0,0 +1,2013 @@
+<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>
+                </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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130140639.vue b/.history/src/views/TAN_20231130140639.vue
new file mode 100644
index 0000000..d19fd7d
--- /dev/null
+++ b/.history/src/views/TAN_20231130140639.vue
@@ -0,0 +1,2013 @@
+<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>
+                </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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130140651.vue b/.history/src/views/TAN_20231130140651.vue
new file mode 100644
index 0000000..469b76a
--- /dev/null
+++ b/.history/src/views/TAN_20231130140651.vue
@@ -0,0 +1,2013 @@
+<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>
+                </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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.defineEcharts("dl", this.option1);
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130140657.vue b/.history/src/views/TAN_20231130140657.vue
new file mode 100644
index 0000000..e1382b2
--- /dev/null
+++ b/.history/src/views/TAN_20231130140657.vue
@@ -0,0 +1,2013 @@
+<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>
+                </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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.defineEcharts("dl", this.circles1);
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130140739.vue b/.history/src/views/TAN_20231130140739.vue
new file mode 100644
index 0000000..1087ea9
--- /dev/null
+++ b/.history/src/views/TAN_20231130140739.vue
@@ -0,0 +1,2018 @@
+<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>
+                </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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.defineEcharts("dl", this.circles1);
+        this.defineEcharts("gt", this.circles1);
+        this.defineEcharts("sn", this.circles1);
+        this.defineEcharts("zj", this.circles1);
+        this.defineEcharts("sh", this.circles1);
+        this.defineEcharts("hg", this.circles1);
+        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;
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130140902.vue b/.history/src/views/TAN_20231130140902.vue
new file mode 100644
index 0000000..b3ea903
--- /dev/null
+++ b/.history/src/views/TAN_20231130140902.vue
@@ -0,0 +1,2028 @@
+<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>
+                </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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.defineEcharts("dl", this.circles1);
+        this.defineEcharts("gt", this.circles1);
+        this.defineEcharts("sn", this.circles1);
+        this.defineEcharts("zj", this.circles1);
+        this.defineEcharts("sh", this.circles1);
+        this.defineEcharts("hg", this.circles1);
+        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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+                }
+                
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130140942.vue b/.history/src/views/TAN_20231130140942.vue
new file mode 100644
index 0000000..f734e3a
--- /dev/null
+++ b/.history/src/views/TAN_20231130140942.vue
@@ -0,0 +1,2032 @@
+<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>
+                </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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.defineEcharts("dl", this.circles1);
+        this.defineEcharts("gt", this.circles1);
+        this.defineEcharts("sn", this.circles1);
+        this.defineEcharts("zj", this.circles1);
+        this.defineEcharts("sh", this.circles1);
+        this.defineEcharts("hg", this.circles1);
+        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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+                    #dl,#gt,#sn,#zj,#sh,#hg{
+                        width: 102px;
+                        height: 100px;
+                    }
+                }
+                
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141009.vue b/.history/src/views/TAN_20231130141009.vue
new file mode 100644
index 0000000..8710f1b
--- /dev/null
+++ b/.history/src/views/TAN_20231130141009.vue
@@ -0,0 +1,2044 @@
+<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>
+                    <div id="dl"></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.defineEcharts("dl", this.circles1);
+        this.defineEcharts("gt", this.circles1);
+        this.defineEcharts("sn", this.circles1);
+        this.defineEcharts("zj", this.circles1);
+        this.defineEcharts("sh", this.circles1);
+        this.defineEcharts("hg", this.circles1);
+        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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141039.vue b/.history/src/views/TAN_20231130141039.vue
new file mode 100644
index 0000000..5651bc5
--- /dev/null
+++ b/.history/src/views/TAN_20231130141039.vue
@@ -0,0 +1,2044 @@
+<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>
+                    <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>
+</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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+        };
+    },
+    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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.defineEcharts("dl", this.circles1);
+        this.defineEcharts("gt", this.circles1);
+        this.defineEcharts("sn", this.circles1);
+        this.defineEcharts("zj", this.circles1);
+        this.defineEcharts("sh", this.circles1);
+        this.defineEcharts("hg", this.circles1);
+        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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141156.vue b/.history/src/views/TAN_20231130141156.vue
new file mode 100644
index 0000000..1ca89aa
--- /dev/null
+++ b/.history/src/views/TAN_20231130141156.vue
@@ -0,0 +1,2044 @@
+<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>
+                    <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>
+</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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.defineEcharts("dl", this.circles1);
+        this.defineEcharts("gt", this.circles1);
+        this.defineEcharts("sn", this.circles1);
+        this.defineEcharts("zj", this.circles1);
+        this.defineEcharts("sh", this.circles1);
+        this.defineEcharts("hg", this.circles1);
+        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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141255.vue b/.history/src/views/TAN_20231130141255.vue
new file mode 100644
index 0000000..ffc22c1
--- /dev/null
+++ b/.history/src/views/TAN_20231130141255.vue
@@ -0,0 +1,2045 @@
+<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>
+                    <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>
+</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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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);
+        },
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141510.vue b/.history/src/views/TAN_20231130141510.vue
new file mode 100644
index 0000000..e7a87e8
--- /dev/null
+++ b/.history/src/views/TAN_20231130141510.vue
@@ -0,0 +1,2141 @@
+<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>
+                    <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>
+</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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            option = {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '赋值覆盖率',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            }
+
+
+        }
+    },
+    mounted() {
+        this.initYhhyzb();
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141606.vue b/.history/src/views/TAN_20231130141606.vue
new file mode 100644
index 0000000..65da1ed
--- /dev/null
+++ b/.history/src/views/TAN_20231130141606.vue
@@ -0,0 +1,2139 @@
+<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>
+                    <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>
+</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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+           let option = {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '赋值覆盖率',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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.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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141613.vue b/.history/src/views/TAN_20231130141613.vue
new file mode 100644
index 0000000..cebeb60
--- /dev/null
+++ b/.history/src/views/TAN_20231130141613.vue
@@ -0,0 +1,2139 @@
+<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>
+                    <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>
+</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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+           let option = {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '赋值覆盖率',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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.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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141614.vue b/.history/src/views/TAN_20231130141614.vue
new file mode 100644
index 0000000..cebeb60
--- /dev/null
+++ b/.history/src/views/TAN_20231130141614.vue
@@ -0,0 +1,2139 @@
+<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>
+                    <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>
+</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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+           let option = {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '赋值覆盖率',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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.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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141649.vue b/.history/src/views/TAN_20231130141649.vue
new file mode 100644
index 0000000..23cf29f
--- /dev/null
+++ b/.history/src/views/TAN_20231130141649.vue
@@ -0,0 +1,2140 @@
+<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>
+                    <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>
+</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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+           let option = {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '赋值覆盖率',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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.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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                        background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141710.vue b/.history/src/views/TAN_20231130141710.vue
new file mode 100644
index 0000000..44fb7c5
--- /dev/null
+++ b/.history/src/views/TAN_20231130141710.vue
@@ -0,0 +1,2141 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+           let option = {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '赋值覆盖率',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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.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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                        background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141713.vue b/.history/src/views/TAN_20231130141713.vue
new file mode 100644
index 0000000..c7cb4bc
--- /dev/null
+++ b/.history/src/views/TAN_20231130141713.vue
@@ -0,0 +1,2141 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '赋值覆盖率',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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.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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                        background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141751.vue b/.history/src/views/TAN_20231130141751.vue
new file mode 100644
index 0000000..99600a4
--- /dev/null
+++ b/.history/src/views/TAN_20231130141751.vue
@@ -0,0 +1,2142 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '赋值覆盖率',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                        background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141815.vue b/.history/src/views/TAN_20231130141815.vue
new file mode 100644
index 0000000..da764b5
--- /dev/null
+++ b/.history/src/views/TAN_20231130141815.vue
@@ -0,0 +1,2142 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '赋值覆盖率',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                        // background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141928.vue b/.history/src/views/TAN_20231130141928.vue
new file mode 100644
index 0000000..712af6b
--- /dev/null
+++ b/.history/src/views/TAN_20231130141928.vue
@@ -0,0 +1,2131 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 20,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '赋值覆盖率',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                        // background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130141950.vue b/.history/src/views/TAN_20231130141950.vue
new file mode 100644
index 0000000..dafe990
--- /dev/null
+++ b/.history/src/views/TAN_20231130141950.vue
@@ -0,0 +1,2131 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(12),
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '赋值覆盖率',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                        // background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142012.vue b/.history/src/views/TAN_20231130142012.vue
new file mode 100644
index 0000000..a58e659
--- /dev/null
+++ b/.history/src/views/TAN_20231130142012.vue
@@ -0,0 +1,2131 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(12),
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                        // background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142014.vue b/.history/src/views/TAN_20231130142014.vue
new file mode 100644
index 0000000..1050f3c
--- /dev/null
+++ b/.history/src/views/TAN_20231130142014.vue
@@ -0,0 +1,2131 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(12),
+                                    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: [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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 102px;
+                        height: 100px;
+                        // background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142223.vue b/.history/src/views/TAN_20231130142223.vue
new file mode 100644
index 0000000..3c27c47
--- /dev/null
+++ b/.history/src/views/TAN_20231130142223.vue
@@ -0,0 +1,2131 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(12),
+                                    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: [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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 150px;
+                        height: 150px;
+                        // background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142302.vue b/.history/src/views/TAN_20231130142302.vue
new file mode 100644
index 0000000..456f909
--- /dev/null
+++ b/.history/src/views/TAN_20231130142302.vue
@@ -0,0 +1,2131 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(12),
+                                    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: [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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: center;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 150px;
+                        height: 150px;
+                        // background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142322.vue b/.history/src/views/TAN_20231130142322.vue
new file mode 100644
index 0000000..b8b2ee8
--- /dev/null
+++ b/.history/src/views/TAN_20231130142322.vue
@@ -0,0 +1,2131 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(12),
+                                    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: [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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: center;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 160px;
+                        height: 160px;
+                        // background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142326.vue b/.history/src/views/TAN_20231130142326.vue
new file mode 100644
index 0000000..7643353
--- /dev/null
+++ b/.history/src/views/TAN_20231130142326.vue
@@ -0,0 +1,2131 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(12),
+                                    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: [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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 160px;
+                        height: 160px;
+                        // background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142330.vue b/.history/src/views/TAN_20231130142330.vue
new file mode 100644
index 0000000..eb27f31
--- /dev/null
+++ b/.history/src/views/TAN_20231130142330.vue
@@ -0,0 +1,2131 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(12),
+                                    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: [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%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-around;
+                    align-content: space-around;
+                    // align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 160px;
+                        height: 160px;
+                        // background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142355.vue b/.history/src/views/TAN_20231130142355.vue
new file mode 100644
index 0000000..b244b8e
--- /dev/null
+++ b/.history/src/views/TAN_20231130142355.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(12),
+                                    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: [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: space-around;
+                    // align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 160px;
+                        height: 160px;
+                        // background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142418.vue b/.history/src/views/TAN_20231130142418.vue
new file mode 100644
index 0000000..179be0a
--- /dev/null
+++ b/.history/src/views/TAN_20231130142418.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(12),
+                                    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: [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: space-around;
+                    // align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 140px;
+                        height: 140px;
+                        // background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142447.vue b/.history/src/views/TAN_20231130142447.vue
new file mode 100644
index 0000000..0d2e0fc
--- /dev/null
+++ b/.history/src/views/TAN_20231130142447.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(12),
+                                    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: [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: space-around;
+                    // align-items: center;
+
+                    #dl,
+                    #gt,
+                    #sn,
+                    #zj,
+                    #sh,
+                    #hg {
+                        width: 120px;
+                        height: 120px;
+                        // background-color: red;
+                    }
+                }
+
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142502.vue b/.history/src/views/TAN_20231130142502.vue
new file mode 100644
index 0000000..2ba51cf
--- /dev/null
+++ b/.history/src/views/TAN_20231130142502.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(12),
+                                    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: [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: space-around;
+                    // 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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142604.vue b/.history/src/views/TAN_20231130142604.vue
new file mode 100644
index 0000000..e977363
--- /dev/null
+++ b/.history/src/views/TAN_20231130142604.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(12),
+                                    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: [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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142704.vue b/.history/src/views/TAN_20231130142704.vue
new file mode 100644
index 0000000..f918350
--- /dev/null
+++ b/.history/src/views/TAN_20231130142704.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(14),
+                                    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: [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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142734.vue b/.history/src/views/TAN_20231130142734.vue
new file mode 100644
index 0000000..4439c98
--- /dev/null
+++ b/.history/src/views/TAN_20231130142734.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 80;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(14),
+                                    color: "#",
+                                    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: [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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142834.vue b/.history/src/views/TAN_20231130142834.vue
new file mode 100644
index 0000000..b3526a4
--- /dev/null
+++ b/.history/src/views/TAN_20231130142834.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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 = 885;
+            const rate = Math.round(value * 100 / 100);
+            let option = {
+                title: [
+                    {
+                        text: "{a|" + rate + "}",
+                        show: true,
+                        x: "center",
+                        y: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(14),
+                                    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: [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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142843.vue b/.history/src/views/TAN_20231130142843.vue
new file mode 100644
index 0000000..ca8a73a
--- /dev/null
+++ b/.history/src/views/TAN_20231130142843.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(14),
+                                    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: [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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142844.vue b/.history/src/views/TAN_20231130142844.vue
new file mode 100644
index 0000000..ca8a73a
--- /dev/null
+++ b/.history/src/views/TAN_20231130142844.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(14),
+                                    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: [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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142912.vue b/.history/src/views/TAN_20231130142912.vue
new file mode 100644
index 0000000..3a0b327
--- /dev/null
+++ b/.history/src/views/TAN_20231130142912.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(14),
+                                    color: "#27E9BF",
+                                    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: [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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142922.vue b/.history/src/views/TAN_20231130142922.vue
new file mode 100644
index 0000000..111b53c
--- /dev/null
+++ b/.history/src/views/TAN_20231130142922.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "30%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(14),
+                                    color: "#27E9BF",
+                                    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: [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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130142944.vue b/.history/src/views/TAN_20231130142944.vue
new file mode 100644
index 0000000..321898f
--- /dev/null
+++ b/.history/src/views/TAN_20231130142944.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "30%",
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143006.vue b/.history/src/views/TAN_20231130143006.vue
new file mode 100644
index 0000000..4a4fe8f
--- /dev/null
+++ b/.history/src/views/TAN_20231130143006.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "30%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(14),
+                                    color: "#27E9BF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "60",
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143019.vue b/.history/src/views/TAN_20231130143019.vue
new file mode 100644
index 0000000..c4978bc
--- /dev/null
+++ b/.history/src/views/TAN_20231130143019.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "40%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(14),
+                                    color: "#27E9BF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "60",
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143024.vue b/.history/src/views/TAN_20231130143024.vue
new file mode 100644
index 0000000..25bcd8a
--- /dev/null
+++ b/.history/src/views/TAN_20231130143024.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "40%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(14),
+                                    color: "#27E9BF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "60%",
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143039.vue b/.history/src/views/TAN_20231130143039.vue
new file mode 100644
index 0000000..18a59e0
--- /dev/null
+++ b/.history/src/views/TAN_20231130143039.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "40%",
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143052.vue b/.history/src/views/TAN_20231130143052.vue
new file mode 100644
index 0000000..3e00fcc
--- /dev/null
+++ b/.history/src/views/TAN_20231130143052.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "36%",
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143113.vue b/.history/src/views/TAN_20231130143113.vue
new file mode 100644
index 0000000..3357a85
--- /dev/null
+++ b/.history/src/views/TAN_20231130143113.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "30%",
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143123.vue b/.history/src/views/TAN_20231130143123.vue
new file mode 100644
index 0000000..26bfbaa
--- /dev/null
+++ b/.history/src/views/TAN_20231130143123.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143211.vue b/.history/src/views/TAN_20231130143211.vue
new file mode 100644
index 0000000..5af6e04
--- /dev/null
+++ b/.history/src/views/TAN_20231130143211.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "#27E9BF",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#27E9BF",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            }
+            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143235.vue b/.history/src/views/TAN_20231130143235.vue
new file mode 100644
index 0000000..5ba1ce9
--- /dev/null
+++ b/.history/src/views/TAN_20231130143235.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "#7388A9",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#27E9BF",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            }
+            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143248.vue b/.history/src/views/TAN_20231130143248.vue
new file mode 100644
index 0000000..9163f9a
--- /dev/null
+++ b/.history/src/views/TAN_20231130143248.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "#27E9BF",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            }
+            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143305.vue b/.history/src/views/TAN_20231130143305.vue
new file mode 100644
index 0000000..38dfaf0
--- /dev/null
+++ b/.history/src/views/TAN_20231130143305.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "#27E9BF",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#7388A9",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            }
+            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143432.vue b/.history/src/views/TAN_20231130143432.vue
new file mode 100644
index 0000000..3a8d916
--- /dev/null
+++ b/.history/src/views/TAN_20231130143432.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "#27E9BF",
+                                    },
+                                    {
+                                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143448.vue b/.history/src/views/TAN_20231130143448.vue
new file mode 100644
index 0000000..26bfbaa
--- /dev/null
+++ b/.history/src/views/TAN_20231130143448.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143501.vue b/.history/src/views/TAN_20231130143501.vue
new file mode 100644
index 0000000..26bfbaa
--- /dev/null
+++ b/.history/src/views/TAN_20231130143501.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143526.vue b/.history/src/views/TAN_20231130143526.vue
new file mode 100644
index 0000000..26bfbaa
--- /dev/null
+++ b/.history/src/views/TAN_20231130143526.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143527.vue b/.history/src/views/TAN_20231130143527.vue
new file mode 100644
index 0000000..26bfbaa
--- /dev/null
+++ b/.history/src/views/TAN_20231130143527.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143537.vue b/.history/src/views/TAN_20231130143537.vue
new file mode 100644
index 0000000..9163f9a
--- /dev/null
+++ b/.history/src/views/TAN_20231130143537.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "#27E9BF",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            }
+            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143556.vue b/.history/src/views/TAN_20231130143556.vue
new file mode 100644
index 0000000..3a8d916
--- /dev/null
+++ b/.history/src/views/TAN_20231130143556.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: "#27E9BF",
+                                    },
+                                    {
+                                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143642.vue b/.history/src/views/TAN_20231130143642.vue
new file mode 100644
index 0000000..26bfbaa
--- /dev/null
+++ b/.history/src/views/TAN_20231130143642.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143643.vue b/.history/src/views/TAN_20231130143643.vue
new file mode 100644
index 0000000..26bfbaa
--- /dev/null
+++ b/.history/src/views/TAN_20231130143643.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143724.vue b/.history/src/views/TAN_20231130143724.vue
new file mode 100644
index 0000000..26bfbaa
--- /dev/null
+++ b/.history/src/views/TAN_20231130143724.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143840.vue b/.history/src/views/TAN_20231130143840.vue
new file mode 100644
index 0000000..84799c2
--- /dev/null
+++ b/.history/src/views/TAN_20231130143840.vue
@@ -0,0 +1,2132 @@
+<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: "35%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143921.vue b/.history/src/views/TAN_20231130143921.vue
new file mode 100644
index 0000000..2fe7311
--- /dev/null
+++ b/.history/src/views/TAN_20231130143921.vue
@@ -0,0 +1,2132 @@
+<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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143925.vue b/.history/src/views/TAN_20231130143925.vue
new file mode 100644
index 0000000..100de97
--- /dev/null
+++ b/.history/src/views/TAN_20231130143925.vue
@@ -0,0 +1,2132 @@
+<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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "50%",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143939.vue b/.history/src/views/TAN_20231130143939.vue
new file mode 100644
index 0000000..100de97
--- /dev/null
+++ b/.history/src/views/TAN_20231130143939.vue
@@ -0,0 +1,2132 @@
+<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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "50%",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130143958.vue b/.history/src/views/TAN_20231130143958.vue
new file mode 100644
index 0000000..1731ad7
--- /dev/null
+++ b/.history/src/views/TAN_20231130143958.vue
@@ -0,0 +1,2132 @@
+<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: 30,
+                                    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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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: 30,
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "center",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: 20,
+                            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130144131.vue b/.history/src/views/TAN_20231130144131.vue
new file mode 100644
index 0000000..b10d8e9
--- /dev/null
+++ b/.history/src/views/TAN_20231130144131.vue
@@ -0,0 +1,2132 @@
+<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: "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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130144155.vue b/.history/src/views/TAN_20231130144155.vue
new file mode 100644
index 0000000..3379c2c
--- /dev/null
+++ b/.history/src/views/TAN_20231130144155.vue
@@ -0,0 +1,2132 @@
+<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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130144208.vue b/.history/src/views/TAN_20231130144208.vue
new file mode 100644
index 0000000..caf613c
--- /dev/null
+++ b/.history/src/views/TAN_20231130144208.vue
@@ -0,0 +1,2132 @@
+<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: "36%",
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130144219.vue b/.history/src/views/TAN_20231130144219.vue
new file mode 100644
index 0000000..7978f23
--- /dev/null
+++ b/.history/src/views/TAN_20231130144219.vue
@@ -0,0 +1,2132 @@
+<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: "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",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            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: "36%",
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130144333.vue b/.history/src/views/TAN_20231130144333.vue
new file mode 100644
index 0000000..0b78174
--- /dev/null
+++ b/.history/src/views/TAN_20231130144333.vue
@@ -0,0 +1,2132 @@
+<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: [845],
+                        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: "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: [845],
+                        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: "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: [845],
+                        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: [845],
+                        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: [845],
+                        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: [845],
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130144336.vue b/.history/src/views/TAN_20231130144336.vue
new file mode 100644
index 0000000..0d4dd2f
--- /dev/null
+++ b/.history/src/views/TAN_20231130144336.vue
@@ -0,0 +1,2132 @@
+<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: [845],
+                        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: "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: [845],
+                        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: "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: [845],
+                        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: "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: [845],
+                        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: [845],
+                        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: [845],
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130144401.vue b/.history/src/views/TAN_20231130144401.vue
new file mode 100644
index 0000000..c989fd0
--- /dev/null
+++ b/.history/src/views/TAN_20231130144401.vue
@@ -0,0 +1,2132 @@
+<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: [845],
+                        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: "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: [845],
+                        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: "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: [845],
+                        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: "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: [845],
+                        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: "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: [845],
+                        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: [845],
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130144412.vue b/.history/src/views/TAN_20231130144412.vue
new file mode 100644
index 0000000..ccbb1c9
--- /dev/null
+++ b/.history/src/views/TAN_20231130144412.vue
@@ -0,0 +1,2132 @@
+<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: [845],
+                        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: "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: [845],
+                        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: "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: [845],
+                        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: "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: [845],
+                        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: "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: [845],
+                        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: "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: [845],
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130144625.vue b/.history/src/views/TAN_20231130144625.vue
new file mode 100644
index 0000000..ac6f727
--- /dev/null
+++ b/.history/src/views/TAN_20231130144625.vue
@@ -0,0 +1,2132 @@
+<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: [845],
+                        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: "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: [845],
+                        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: "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: [845],
+                        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: "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: [845],
+                        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: "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: [845],
+                        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: "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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130144709.vue b/.history/src/views/TAN_20231130144709.vue
new file mode 100644
index 0000000..09702fe
--- /dev/null
+++ b/.history/src/views/TAN_20231130144709.vue
@@ -0,0 +1,2132 @@
+<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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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: "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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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: "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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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: "50%",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: fontSizeRem(12),
+                            color: "#fff",
+                        },
+                    },
+                ],
+                polar: {
+                    center: ["50%", "40%"],
+                    radius: ["60%", "75%"],
+                },
+                angleAxis: {
+                    max: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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: "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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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: "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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130144820.vue b/.history/src/views/TAN_20231130144820.vue
new file mode 100644
index 0000000..f8b341b
--- /dev/null
+++ b/.history/src/views/TAN_20231130144820.vue
@@ -0,0 +1,2132 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130145023.vue b/.history/src/views/TAN_20231130145023.vue
new file mode 100644
index 0000000..6f259a3
--- /dev/null
+++ b/.history/src/views/TAN_20231130145023.vue
@@ -0,0 +1,2132 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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: "20",
+                },
+                {
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130145136.vue b/.history/src/views/TAN_20231130145136.vue
new file mode 100644
index 0000000..26199c2
--- /dev/null
+++ b/.history/src/views/TAN_20231130145136.vue
@@ -0,0 +1,2141 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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: "20",
+                },
+                {
+                    name: "石化行业",
+                    value: "20",
+                },
+                {
+                    name: "化工行业",
+                    value: "30",
+                },
+                {
+                    name: "建材行业",
+                    value: "20",
+                }, {
+                    name: "钢铁行业",
+                    value: "20",
+                }, {
+                    name: "有色行业",
+                    value: "20",
+                }, {
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130145205.vue b/.history/src/views/TAN_20231130145205.vue
new file mode 100644
index 0000000..d24f008
--- /dev/null
+++ b/.history/src/views/TAN_20231130145205.vue
@@ -0,0 +1,2145 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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: "20",
+                },
+                {
+                    name: "石化行业",
+                    value: "20",
+                },
+                {
+                    name: "化工行业",
+                    value: "30",
+                },
+                {
+                    name: "建材行业",
+                    value: "20",
+                }, {
+                    name: "钢铁行业",
+                    value: "20",
+                }, {
+                    name: "有色行业",
+                    value: "20",
+                }, {
+                    name: "造纸行业",
+                    value: "20",
+                },
+                {
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130145212.vue b/.history/src/views/TAN_20231130145212.vue
new file mode 100644
index 0000000..e3738c0
--- /dev/null
+++ b/.history/src/views/TAN_20231130145212.vue
@@ -0,0 +1,2145 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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: "20",
+                },
+                {
+                    name: "石化行业",
+                    value: "20",
+                },
+                {
+                    name: "化工行业",
+                    value: "30",
+                },
+                {
+                    name: "建材行业",
+                    value: "20",
+                }, {
+                    name: "钢铁行业",
+                    value: "20",
+                }, {
+                    name: "有色行业",
+                    value: "20",
+                }, {
+                    name: "造纸行业",
+                    value: "20",
+                },
+                {
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130145311.vue b/.history/src/views/TAN_20231130145311.vue
new file mode 100644
index 0000000..2065ddf
--- /dev/null
+++ b/.history/src/views/TAN_20231130145311.vue
@@ -0,0 +1,2145 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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 = ["#2B4C86", "#86ACCE ","#9CA5B4", "#3B72AD", "#FDCC00", "#F27629"];
+            let echartData = [
+                {
+                    name: "发电行业",
+                    value: "20",
+                },
+                {
+                    name: "石化行业",
+                    value: "20",
+                },
+                {
+                    name: "化工行业",
+                    value: "30",
+                },
+                {
+                    name: "建材行业",
+                    value: "20",
+                }, {
+                    name: "钢铁行业",
+                    value: "20",
+                }, {
+                    name: "有色行业",
+                    value: "20",
+                }, {
+                    name: "造纸行业",
+                    value: "20",
+                },
+                {
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130145326.vue b/.history/src/views/TAN_20231130145326.vue
new file mode 100644
index 0000000..8cd50e6
--- /dev/null
+++ b/.history/src/views/TAN_20231130145326.vue
@@ -0,0 +1,2145 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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 = ["#2B4C86", "#86ACCE ","#9CA5B4","#23BAA6", "#3B72AD", "#FDCC00", "#F27629"];
+            let echartData = [
+                {
+                    name: "发电行业",
+                    value: "20",
+                },
+                {
+                    name: "石化行业",
+                    value: "20",
+                },
+                {
+                    name: "化工行业",
+                    value: "30",
+                },
+                {
+                    name: "建材行业",
+                    value: "20",
+                }, {
+                    name: "钢铁行业",
+                    value: "20",
+                }, {
+                    name: "有色行业",
+                    value: "20",
+                }, {
+                    name: "造纸行业",
+                    value: "20",
+                },
+                {
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130145337.vue b/.history/src/views/TAN_20231130145337.vue
new file mode 100644
index 0000000..dcbe979
--- /dev/null
+++ b/.history/src/views/TAN_20231130145337.vue
@@ -0,0 +1,2145 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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 = ["#2B4C86", "#86ACCE ","#9CA5B4","#23BAA6", "#459EA2 ", "#FDCC00", "#F27629"];
+            let echartData = [
+                {
+                    name: "发电行业",
+                    value: "20",
+                },
+                {
+                    name: "石化行业",
+                    value: "20",
+                },
+                {
+                    name: "化工行业",
+                    value: "30",
+                },
+                {
+                    name: "建材行业",
+                    value: "20",
+                }, {
+                    name: "钢铁行业",
+                    value: "20",
+                }, {
+                    name: "有色行业",
+                    value: "20",
+                }, {
+                    name: "造纸行业",
+                    value: "20",
+                },
+                {
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130145339.vue b/.history/src/views/TAN_20231130145339.vue
new file mode 100644
index 0000000..7b7122c
--- /dev/null
+++ b/.history/src/views/TAN_20231130145339.vue
@@ -0,0 +1,2145 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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 = ["#2B4C86", "#86ACCE ","#9CA5B4","#23BAA6", "#459EA2", "#FDCC00", "#F27629"];
+            let echartData = [
+                {
+                    name: "发电行业",
+                    value: "20",
+                },
+                {
+                    name: "石化行业",
+                    value: "20",
+                },
+                {
+                    name: "化工行业",
+                    value: "30",
+                },
+                {
+                    name: "建材行业",
+                    value: "20",
+                }, {
+                    name: "钢铁行业",
+                    value: "20",
+                }, {
+                    name: "有色行业",
+                    value: "20",
+                }, {
+                    name: "造纸行业",
+                    value: "20",
+                },
+                {
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130145356.vue b/.history/src/views/TAN_20231130145356.vue
new file mode 100644
index 0000000..3d1424a
--- /dev/null
+++ b/.history/src/views/TAN_20231130145356.vue
@@ -0,0 +1,2145 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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 = ["#2B4C86", "#86ACCE ","#9CA5B4","#23BAA6", "#459EA2", "#2B7DE4", "#F27629"];
+            let echartData = [
+                {
+                    name: "发电行业",
+                    value: "20",
+                },
+                {
+                    name: "石化行业",
+                    value: "20",
+                },
+                {
+                    name: "化工行业",
+                    value: "30",
+                },
+                {
+                    name: "建材行业",
+                    value: "20",
+                }, {
+                    name: "钢铁行业",
+                    value: "20",
+                }, {
+                    name: "有色行业",
+                    value: "20",
+                }, {
+                    name: "造纸行业",
+                    value: "20",
+                },
+                {
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130145430.vue b/.history/src/views/TAN_20231130145430.vue
new file mode 100644
index 0000000..94944c6
--- /dev/null
+++ b/.history/src/views/TAN_20231130145430.vue
@@ -0,0 +1,2145 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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 = ["#2B4C86", "#86ACCE ","#9CA5B4","#23BAA6", "#459EA2", "#2B7DE4", "#7C7062","#6B7BC0","#294A83"];
+            let echartData = [
+                {
+                    name: "发电行业",
+                    value: "20",
+                },
+                {
+                    name: "石化行业",
+                    value: "20",
+                },
+                {
+                    name: "化工行业",
+                    value: "30",
+                },
+                {
+                    name: "建材行业",
+                    value: "20",
+                }, {
+                    name: "钢铁行业",
+                    value: "20",
+                }, {
+                    name: "有色行业",
+                    value: "20",
+                }, {
+                    name: "造纸行业",
+                    value: "20",
+                },
+                {
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130145516.vue b/.history/src/views/TAN_20231130145516.vue
new file mode 100644
index 0000000..a2b2676
--- /dev/null
+++ b/.history/src/views/TAN_20231130145516.vue
@@ -0,0 +1,2145 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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 = ["#2B4C86", "#86ACCE ","#9CA5B4","#23BAA6", "#459EA2", "#2B7DE4", "#7C7062","#6B7BC0","#294A83"];
+            let echartData = [
+                {
+                    name: "发电行业",
+                    value: "20",
+                },
+                {
+                    name: "石化行业",
+                    value: "20",
+                },
+                {
+                    name: "化工行业",
+                    value: "30",
+                },
+                {
+                    name: "建材行业",
+                    value: "20",
+                }, {
+                    name: "钢铁行业",
+                    value: "20",
+                }, {
+                    name: "有色行业",
+                    value: "20",
+                }, {
+                    name: "造纸行业",
+                    value: "20",
+                },
+                {
+                    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: "20%",
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130152656.vue b/.history/src/views/TAN_20231130152656.vue
new file mode 100644
index 0000000..f69a9a6
--- /dev/null
+++ b/.history/src/views/TAN_20231130152656.vue
@@ -0,0 +1,2145 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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 = ["#2B4C86", "#86ACCE ","#9CA5B4","#23BAA6", "#459EA2", "#2B7DE4", "#7C7062","#6B7BC0","#294A83"];
+            let echartData = [
+                {
+                    name: "发电行业",
+                    value: "20",
+                },
+                {
+                    name: "石化行业",
+                    value: "20",
+                },
+                {
+                    name: "化工行业",
+                    value: "30",
+                },
+                {
+                    name: "建材行业",
+                    value: "20",
+                }, {
+                    name: "钢铁行业",
+                    value: "20",
+                }, {
+                    name: "有色行业",
+                    value: "20",
+                }, {
+                    name: "造纸行业",
+                    value: "20",
+                },
+                {
+                    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: "20%",
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/TAN_20231130152657.vue b/.history/src/views/TAN_20231130152657.vue
new file mode 100644
index 0000000..f69a9a6
--- /dev/null
+++ b/.history/src/views/TAN_20231130152657.vue
@@ -0,0 +1,2145 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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 = ["#2B4C86", "#86ACCE ","#9CA5B4","#23BAA6", "#459EA2", "#2B7DE4", "#7C7062","#6B7BC0","#294A83"];
+            let echartData = [
+                {
+                    name: "发电行业",
+                    value: "20",
+                },
+                {
+                    name: "石化行业",
+                    value: "20",
+                },
+                {
+                    name: "化工行业",
+                    value: "30",
+                },
+                {
+                    name: "建材行业",
+                    value: "20",
+                }, {
+                    name: "钢铁行业",
+                    value: "20",
+                }, {
+                    name: "有色行业",
+                    value: "20",
+                }, {
+                    name: "造纸行业",
+                    value: "20",
+                },
+                {
+                    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: "20%",
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/.history/src/views/XQDP_20231130093330.vue b/.history/src/views/XQDP_20231130093330.vue
new file mode 100644
index 0000000..e69de29
diff --git a/.history/src/views/XQDP_20231130093339.vue b/.history/src/views/XQDP_20231130093339.vue
new file mode 100644
index 0000000..c36bb65
--- /dev/null
+++ b/.history/src/views/XQDP_20231130093339.vue
@@ -0,0 +1,1546 @@
+<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="ztynqk">
+            <p class="title">总体用能情况</p>
+            <ul class="typeBox">
+              <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+              <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+              <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+            </ul>
+            <div class="bottom">
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+                <div>
+                  <p>用电量(MWH)</p>
+                  <p><span>84.00</span><span>-13.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+                <div>
+                  <p>用蒸汽量(m2)</p>
+                  <p><span>45.32</span><span>-23.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+                <div>
+                  <p>用水量(m2)</p>
+                  <p><span>56.00</span><span>-33.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+                <div>
+                  <p>用汽量(m2)</p>
+                  <p><span>37.00</span><span>43.20%</span></p>
+                </div>
+              </div>
+            </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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+          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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/XQDP_20231130093655.vue b/.history/src/views/XQDP_20231130093655.vue
new file mode 100644
index 0000000..b5fdbba
--- /dev/null
+++ b/.history/src/views/XQDP_20231130093655.vue
@@ -0,0 +1,1533 @@
+<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="center">
+                        <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="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>
+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: "电",
+            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();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .ztynqk {
+                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;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+
+                    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;
+                    }
+                }
+
+                .bottom {
+                    margin-top: 100px;
+                    display: flex;
+                    flex-wrap: wrap;
+
+                    .bottomBox {
+                        display: flex;
+                        align-items: center;
+                        width: 180px;
+                        margin: 10px;
+
+                        img {
+                            width: 72px;
+                            height: 72px;
+                        }
+
+                        div {
+                            p:nth-of-type(1) {
+                                width: 120px;
+                                margin-bottom: 10px;
+                                margin-top: 5px;
+                                font-size: 14px;
+                                font-family: " AlibabaPuHuiTi";
+                                font-weight: 400;
+                            }
+
+                            span:nth-of-type(1) {
+                                font-size: 20px;
+                                font-family: "AlibabaPuHuiTi";
+                                font-weight: 700;
+                            }
+
+                            span:nth-of-type(2) {
+                                font-size: 14px;
+                                font-family: "AlibabaPuHuiTi";
+                                font-weight: 400;
+                                margin-left: 6px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/XQDP_20231130093737.vue b/.history/src/views/XQDP_20231130093737.vue
new file mode 100644
index 0000000..fefdb5b
--- /dev/null
+++ b/.history/src/views/XQDP_20231130093737.vue
@@ -0,0 +1,1517 @@
+<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="center">
+                        <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="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>
+import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                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();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .ztynqk {
+                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;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+
+                    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;
+                    }
+                }
+
+                .bottom {
+                    margin-top: 100px;
+                    display: flex;
+                    flex-wrap: wrap;
+
+                    .bottomBox {
+                        display: flex;
+                        align-items: center;
+                        width: 180px;
+                        margin: 10px;
+
+                        img {
+                            width: 72px;
+                            height: 72px;
+                        }
+
+                        div {
+                            p:nth-of-type(1) {
+                                width: 120px;
+                                margin-bottom: 10px;
+                                margin-top: 5px;
+                                font-size: 14px;
+                                font-family: " AlibabaPuHuiTi";
+                                font-weight: 400;
+                            }
+
+                            span:nth-of-type(1) {
+                                font-size: 20px;
+                                font-family: "AlibabaPuHuiTi";
+                                font-weight: 700;
+                            }
+
+                            span:nth-of-type(2) {
+                                font-size: 14px;
+                                font-family: "AlibabaPuHuiTi";
+                                font-weight: 400;
+                                margin-left: 6px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/XQDP_20231130093745.vue b/.history/src/views/XQDP_20231130093745.vue
new file mode 100644
index 0000000..75464c9
--- /dev/null
+++ b/.history/src/views/XQDP_20231130093745.vue
@@ -0,0 +1,1561 @@
+<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="center">
+                        <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="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>
+import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .ztynqk {
+                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;
+                }
+
+                .typeBox {
+                    list-style: none;
+                    display: flex;
+                    position: absolute;
+                    top: 54px;
+
+                    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;
+                    }
+                }
+
+                .bottom {
+                    margin-top: 100px;
+                    display: flex;
+                    flex-wrap: wrap;
+
+                    .bottomBox {
+                        display: flex;
+                        align-items: center;
+                        width: 180px;
+                        margin: 10px;
+
+                        img {
+                            width: 72px;
+                            height: 72px;
+                        }
+
+                        div {
+                            p:nth-of-type(1) {
+                                width: 120px;
+                                margin-bottom: 10px;
+                                margin-top: 5px;
+                                font-size: 14px;
+                                font-family: " AlibabaPuHuiTi";
+                                font-weight: 400;
+                            }
+
+                            span:nth-of-type(1) {
+                                font-size: 20px;
+                                font-family: "AlibabaPuHuiTi";
+                                font-weight: 700;
+                            }
+
+                            span:nth-of-type(2) {
+                                font-size: 14px;
+                                font-family: "AlibabaPuHuiTi";
+                                font-weight: 400;
+                                margin-left: 6px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/XQDP_20231130094040.vue b/.history/src/views/XQDP_20231130094040.vue
new file mode 100644
index 0000000..0222bb3
--- /dev/null
+++ b/.history/src/views/XQDP_20231130094040.vue
@@ -0,0 +1,1625 @@
+<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="center">
+                        <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="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>
+import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 1.53125rem
+                    /* 294/192 */
+                ;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: .833333rem
+                        /* 160/192 */
+                    ;
+                    width: .75rem
+                        /* 144/192 */
+                    ;
+                    height: .1875rem
+                        /* 36/192 */
+                    ;
+                    font-size: .09375rem
+                        /* 18/192 */
+                    ;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 1.130208rem
+                        /* 217/192 */
+                    ;
+                    height: .65625rem
+                        /* 126/192 */
+                    ;
+                    position: absolute;
+                    left: .572917rem
+                        /* 110/192 */
+                    ;
+                    top: .572917rem
+                        /* 110/192 */
+                    ;
+                    text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: .421875rem
+                            /* 81/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        font-size: .125rem
+                            /* 24/192 */
+                        ;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    p:nth-child(2) {
+                        width: .369792rem
+                            /* 71/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        text-align: center;
+                        font-size: .0625rem
+                            /* 12/192 */
+                        ;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    img {
+                        width: 1.130208rem
+                            /* 217/192 */
+                        ;
+                        height: .65625rem
+                            /* 126/192 */
+                        ;
+                    }
+                }
+
+                .insides {
+                    margin-top: .291667rem
+                        /* 56/192 */
+                    ;
+                    width: 2.270833rem
+                        /* 436/192 */
+                    ;
+                    height: 1.53125rem
+                        /* 294/192 */
+                    ;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        // width: .8125rem
+                            /* 156/192 */
+                        ;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            width: .260417rem
+                                /* 50/192 */
+                            ;
+                            height: .3125rem
+                                /* 60/192 */
+                            ;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: .291667rem
+                                /* 56/192 */
+                            ;
+                            height: .114583rem
+                                /* 22/192 */
+                            ;
+                            font-size: .072917rem
+                                /* 14/192 */
+                            ;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: .114583rem
+                                /* 22/192 */
+                            ;
+                        }
+                    }
+                }
+            }
+
+            .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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/XQDP_20231130094049.vue b/.history/src/views/XQDP_20231130094049.vue
new file mode 100644
index 0000000..6d44361
--- /dev/null
+++ b/.history/src/views/XQDP_20231130094049.vue
@@ -0,0 +1,1626 @@
+<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="center">
+                        <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="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>
+import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 1.53125rem
+                    /* 294/192 */
+                ;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: .833333rem
+                        /* 160/192 */
+                    ;
+                    width: .75rem
+                        /* 144/192 */
+                    ;
+                    height: .1875rem
+                        /* 36/192 */
+                    ;
+                    font-size: .09375rem
+                        /* 18/192 */
+                    ;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 1.130208rem
+                        /* 217/192 */
+                    ;
+                    height: .65625rem
+                        /* 126/192 */
+                    ;
+                    position: absolute;
+                    left: .572917rem
+                        /* 110/192 */
+                    ;
+                    top: .572917rem
+                        /* 110/192 */
+                    ;
+                    text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: .421875rem
+                            /* 81/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        font-size: .125rem
+                            /* 24/192 */
+                        ;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    p:nth-child(2) {
+                        width: .369792rem
+                            /* 71/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        text-align: center;
+                        font-size: .0625rem
+                            /* 12/192 */
+                        ;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    img {
+                        width: 1.130208rem
+                            /* 217/192 */
+                        ;
+                        height: .65625rem
+                            /* 126/192 */
+                        ;
+                    }
+                }
+
+                .insides {
+                    margin-top: .291667rem
+                        /* 56/192 */
+                    ;
+                    width: 2.270833rem
+                        /* 436/192 */
+                    ;
+                    height: 1.53125rem
+                        /* 294/192 */
+                    ;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        // width: .8125rem
+                            /* 156/192 */
+                        ;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            // width: .260417rem
+                                /* 50/192 */
+                            ;
+                            height: 60px;
+                            height: .3125rem
+                                /* 60/192 */
+                            ;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: .291667rem
+                                /* 56/192 */
+                            ;
+                            height: .114583rem
+                                /* 22/192 */
+                            ;
+                            font-size: .072917rem
+                                /* 14/192 */
+                            ;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: .114583rem
+                                /* 22/192 */
+                            ;
+                        }
+                    }
+                }
+            }
+
+            .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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/XQDP_20231130094105.vue b/.history/src/views/XQDP_20231130094105.vue
new file mode 100644
index 0000000..f1599a7
--- /dev/null
+++ b/.history/src/views/XQDP_20231130094105.vue
@@ -0,0 +1,1627 @@
+<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="center">
+                        <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="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>
+import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 1.53125rem
+                    /* 294/192 */
+                ;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: .833333rem
+                        /* 160/192 */
+                    ;
+                    width: .75rem
+                        /* 144/192 */
+                    ;
+                    height: .1875rem
+                        /* 36/192 */
+                    ;
+                    font-size: .09375rem
+                        /* 18/192 */
+                    ;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 1.130208rem
+                        /* 217/192 */
+                    ;
+                    height: .65625rem
+                        /* 126/192 */
+                    ;
+                    position: absolute;
+                    left: .572917rem
+                        /* 110/192 */
+                    ;
+                    top: .572917rem
+                        /* 110/192 */
+                    ;
+                    text-align: center;
+                    display: block;
+
+                    p:nth-child(1) {
+                        width: .421875rem
+                            /* 81/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        font-size: .125rem
+                            /* 24/192 */
+                        ;
+                        text-align: center;
+                        font-weight: 500;
+                        color: #29F1FA;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    p:nth-child(2) {
+                        width: .369792rem
+                            /* 71/192 */
+                        ;
+                        height: .130208rem
+                            /* 25/192 */
+                        ;
+                        text-align: center;
+                        font-size: .0625rem
+                            /* 12/192 */
+                        ;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: .114583rem
+                            /* 22/192 */
+                        ;
+                    }
+
+                    img {
+                        width: 1.130208rem
+                            /* 217/192 */
+                        ;
+                        height: .65625rem
+                            /* 126/192 */
+                        ;
+                    }
+                }
+
+                .insides {
+                    margin-top: .291667rem
+                        /* 56/192 */
+                    ;
+                    width: 2.270833rem
+                        /* 436/192 */
+                    ;
+                    height: 1.53125rem
+                        /* 294/192 */
+                    ;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        // width: .8125rem
+                            /* 156/192 */
+                        ;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            // width: .260417rem
+                                /* 50/192 */
+                            ;
+                            height: 60px;
+                            // height: .3125rem
+                                /* 60/192 */
+                            ;
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            // width: .291667rem
+                                /* 56/192 */
+                            ;
+                            height: .114583rem
+                                /* 22/192 */
+                            ;
+                            font-size: .072917rem
+                                /* 14/192 */
+                            ;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: .114583rem
+                                /* 22/192 */
+                            ;
+                        }
+                    }
+                }
+            }
+
+            .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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/XQDP_20231130094508.vue b/.history/src/views/XQDP_20231130094508.vue
new file mode 100644
index 0000000..62103c0
--- /dev/null
+++ b/.history/src/views/XQDP_20231130094508.vue
@@ -0,0 +1,1586 @@
+<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="center">
+                        <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="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>
+import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 110px;
+                    top: 110px;
+                    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;
+                    }
+
+                    p:nth-child(2) {
+                        width: 71px;
+                        height: 25px;
+                        text-align: center;
+                        font-size: 12;
+                        font-weight: 250;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                    }
+
+                    img {
+                        width: 1.130208rem
+                            /* 217/192 */
+                        ;
+                        height: .65625rem
+                            /* 126/192 */
+                        ;
+                    }
+                }
+
+                .insides {
+                    margin-top: .291667rem
+                        /* 56/192 */
+                    ;
+                    width: 2.270833rem
+                        /* 436/192 */
+                    ;
+                    height: 1.53125rem
+                        /* 294/192 */
+                    ;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-wrap: wrap;
+                    position: relative;
+
+                    .con {
+                        width: 156px;
+                        display: flex;
+
+                        img {
+                            width: 50px;
+                            // width: .260417rem
+                                /* 50/192 */
+                            height: 60px;
+                            // height: .3125rem
+                                /* 60/192 */
+                            
+                            display: block;
+                        }
+
+                        p:nth-child(1) {
+                            color: #fff;
+                        }
+
+                        p:nth-child(2) {
+                            width: 56px;
+                            height: .114583rem
+                                /* 22/192 */
+                            ;
+                            font-size: fontSizeRem(14);
+                            // font-size: .072917rem
+                                /* 14/192 */
+                            ;
+                            // font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+                            font-weight: 300;
+                            color: #7DD9DD;
+                            line-height: .114583rem
+                                /* 22/192 */
+                            ;
+                        }
+                    }
+                }
+            }
+
+            .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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/XQDP_20231130094723.vue b/.history/src/views/XQDP_20231130094723.vue
new file mode 100644
index 0000000..3eb7c14
--- /dev/null
+++ b/.history/src/views/XQDP_20231130094723.vue
@@ -0,0 +1,1564 @@
+<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="center">
+                        <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="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>
+import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 110px;
+                    top: 110px;
+                    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;
+                    }
+
+                    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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130145741.vue b/.history/src/views/ZHDY_20231130145741.vue
new file mode 100644
index 0000000..e69de29
diff --git a/.history/src/views/ZHDY_20231130145800.vue b/.history/src/views/ZHDY_20231130145800.vue
new file mode 100644
index 0000000..c36bb65
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130145800.vue
@@ -0,0 +1,1546 @@
+<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="ztynqk">
+            <p class="title">总体用能情况</p>
+            <ul class="typeBox">
+              <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+              <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+              <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+            </ul>
+            <div class="bottom">
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+                <div>
+                  <p>用电量(MWH)</p>
+                  <p><span>84.00</span><span>-13.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+                <div>
+                  <p>用蒸汽量(m2)</p>
+                  <p><span>45.32</span><span>-23.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+                <div>
+                  <p>用水量(m2)</p>
+                  <p><span>56.00</span><span>-33.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+                <div>
+                  <p>用汽量(m2)</p>
+                  <p><span>37.00</span><span>43.20%</span></p>
+                </div>
+              </div>
+            </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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+          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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130150803.vue b/.history/src/views/ZHDY_20231130150803.vue
new file mode 100644
index 0000000..64b5d16
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130150803.vue
@@ -0,0 +1,1546 @@
+<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="ztynqk">
+            <p class="title">总体用能情况</p>
+            <ul class="typeBox">
+              <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+              <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+              <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+            </ul>
+            <div class="bottom">
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+                <div>
+                  <p>用电量(MWH)</p>
+                  <p><span>84.00</span><span>-13.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+                <div>
+                  <p>用蒸汽量(m2)</p>
+                  <p><span>45.32</span><span>-23.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+                <div>
+                  <p>用水量(m2)</p>
+                  <p><span>56.00</span><span>-33.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+                <div>
+                  <p>用汽量(m2)</p>
+                  <p><span>37.00</span><span>43.20%</span></p>
+                </div>
+              </div>
+            </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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+          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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130150835.vue b/.history/src/views/ZHDY_20231130150835.vue
new file mode 100644
index 0000000..21e2b45
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130150835.vue
@@ -0,0 +1,1546 @@
+<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="ztynqk">
+            <p class="title">年度签约用户</p>
+            <ul class="typeBox">
+              <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+              <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+              <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+            </ul>
+            <div class="bottom">
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+                <div>
+                  <p>用电量(MWH)</p>
+                  <p><span>84.00</span><span>-13.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+                <div>
+                  <p>用蒸汽量(m2)</p>
+                  <p><span>45.32</span><span>-23.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+                <div>
+                  <p>用水量(m2)</p>
+                  <p><span>56.00</span><span>-33.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+                <div>
+                  <p>用汽量(m2)</p>
+                  <p><span>37.00</span><span>43.20%</span></p>
+                </div>
+              </div>
+            </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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+          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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130151036.vue b/.history/src/views/ZHDY_20231130151036.vue
new file mode 100644
index 0000000..7cef0bf
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130151036.vue
@@ -0,0 +1,1546 @@
+<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>
+            <ul class="typeBox">
+              <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+              <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+              <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+            </ul>
+            <div class="bottom">
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+                <div>
+                  <p>用电量(MWH)</p>
+                  <p><span>84.00</span><span>-13.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+                <div>
+                  <p>用蒸汽量(m2)</p>
+                  <p><span>45.32</span><span>-23.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+                <div>
+                  <p>用水量(m2)</p>
+                  <p><span>56.00</span><span>-33.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+                <div>
+                  <p>用汽量(m2)</p>
+                  <p><span>37.00</span><span>43.20%</span></p>
+                </div>
+              </div>
+            </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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+          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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130151208.vue b/.history/src/views/ZHDY_20231130151208.vue
new file mode 100644
index 0000000..51d7670
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130151208.vue
@@ -0,0 +1,1541 @@
+<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="bottom">
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+                <div>
+                  <p>用电量(MWH)</p>
+                  <p><span>84.00</span><span>-13.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+                <div>
+                  <p>用蒸汽量(m2)</p>
+                  <p><span>45.32</span><span>-23.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+                <div>
+                  <p>用水量(m2)</p>
+                  <p><span>56.00</span><span>-33.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+                <div>
+                  <p>用汽量(m2)</p>
+                  <p><span>37.00</span><span>43.20%</span></p>
+                </div>
+              </div>
+            </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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+          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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130151407.vue b/.history/src/views/ZHDY_20231130151407.vue
new file mode 100644
index 0000000..c11d280
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130151407.vue
@@ -0,0 +1,1542 @@
+<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="bottom">
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+                <div>
+                  <p>用电量(MWH)</p>
+                  <p><span>84.00</span><span>-13.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+                <div>
+                  <p>用蒸汽量(m2)</p>
+                  <p><span>45.32</span><span>-23.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+                <div>
+                  <p>用水量(m2)</p>
+                  <p><span>56.00</span><span>-33.20%</span></p>
+                </div>
+              </div>
+              <div class="bottomBox">
+                <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+                <div>
+                  <p>用汽量(m2)</p>
+                  <p><span>37.00</span><span>43.20%</span></p>
+                </div>
+              </div>
+            </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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+            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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130151445.vue b/.history/src/views/ZHDY_20231130151445.vue
new file mode 100644
index 0000000..e661c12
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130151445.vue
@@ -0,0 +1,1513 @@
+<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>
+          <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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+            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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130151459.vue b/.history/src/views/ZHDY_20231130151459.vue
new file mode 100644
index 0000000..1ef579e
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130151459.vue
@@ -0,0 +1,1513 @@
+<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=""></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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+            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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130151538.vue b/.history/src/views/ZHDY_20231130151538.vue
new file mode 100644
index 0000000..5588f47
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130151538.vue
@@ -0,0 +1,1514 @@
+<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"></div>
+            <div id="qyyh"></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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+            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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130151542.vue b/.history/src/views/ZHDY_20231130151542.vue
new file mode 100644
index 0000000..5588f47
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130151542.vue
@@ -0,0 +1,1514 @@
+<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"></div>
+            <div id="qyyh"></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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+            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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130151658.vue b/.history/src/views/ZHDY_20231130151658.vue
new file mode 100644
index 0000000..6335f24
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130151658.vue
@@ -0,0 +1,1516 @@
+<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>户</span></p>
+            </div>
+            <div id="qyyh"></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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+            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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130151717.vue b/.history/src/views/ZHDY_20231130151717.vue
new file mode 100644
index 0000000..16a43b5
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130151717.vue
@@ -0,0 +1,1516 @@
+<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>
+            <div id="qyyh"></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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+            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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130151749.vue b/.history/src/views/ZHDY_20231130151749.vue
new file mode 100644
index 0000000..4cf811b
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130151749.vue
@@ -0,0 +1,1518 @@
+<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>
+                <p></p>
+                <p></p>
+            </div>
+            <div id="qyyh"></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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+            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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130151832.vue b/.history/src/views/ZHDY_20231130151832.vue
new file mode 100644
index 0000000..b5e6acb
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130151832.vue
@@ -0,0 +1,1523 @@
+<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>
+                    <p>同比</p>
+                    <p></p>
+                </div>
+                <div>
+                    <p></p>
+                </div>
+            </div>
+            <div id="qyyh"></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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+            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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130151944.vue b/.history/src/views/ZHDY_20231130151944.vue
new file mode 100644
index 0000000..e5e2f16
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130151944.vue
@@ -0,0 +1,1523 @@
+<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>
+                    <p>同比</p>
+                    <p class="tb_percent">12.23%<span class="tb_"></span></p>
+                </div>
+                <div>
+                    <p>环比</p>
+                </div>
+            </div>
+            <div id="qyyh"></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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+            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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130152015.vue b/.history/src/views/ZHDY_20231130152015.vue
new file mode 100644
index 0000000..2ff644c
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130152015.vue
@@ -0,0 +1,1523 @@
+<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>
+                    <p>同比</p>
+                    <p class="tb_percent">12.23% <img src="" alt=""></p>
+                </div>
+                <div>
+                    <p>环比</p>
+                </div>
+            </div>
+            <div id="qyyh"></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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+            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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231130152353.vue b/.history/src/views/ZHDY_20231130152353.vue
new file mode 100644
index 0000000..2e4e5e8
--- /dev/null
+++ b/.history/src/views/ZHDY_20231130152353.vue
@@ -0,0 +1,1523 @@
+<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>
+                    <p>同比</p>
+                    <p class="tb_percent">12.23% <img src="../assets/zhsdy/325数值上升 (4).png" alt=""></p>
+                </div>
+                <div>
+                    <p>环比</p>
+                </div>
+            </div>
+            <div id="qyyh"></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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+            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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f128c44
--- /dev/null
+++ b/README.md
@@ -0,0 +1,19 @@
+# project
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..4aafc5f
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..3f7a43f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,22735 @@
+{
+  "name": "project",
+  "version": "0.1.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "project",
+      "version": "0.1.0",
+      "dependencies": {
+        "@vant/touch-emulator": "^1.4.0",
+        "amfe-flexible": "^2.2.1",
+        "core-js": "^3.8.3",
+        "echarts": "^5.4.3",
+        "echarts-gl": "^2.0.9",
+        "lib-flexible": "^0.3.2",
+        "postcss-preset-env": "^9.3.0",
+        "postcss-pxtorem": "^5.1.1",
+        "register-service-worker": "^1.7.2",
+        "vue": "^2.6.14",
+        "vue-router": "^3.5.1",
+        "vuex": "^3.6.2"
+      },
+      "devDependencies": {
+        "@vue/cli-plugin-babel": "~5.0.0",
+        "@vue/cli-plugin-pwa": "~5.0.0",
+        "@vue/cli-plugin-router": "~5.0.0",
+        "@vue/cli-plugin-vuex": "~5.0.0",
+        "@vue/cli-service": "~5.0.0",
+        "less": "^4.0.0",
+        "less-loader": "^8.0.0",
+        "vue-template-compiler": "^2.6.14"
+      }
+    },
+    "node_modules/@achrinza/node-ipc": {
+      "version": "9.2.8",
+      "resolved": "https://registry.npmmirror.com/@achrinza/node-ipc/-/node-ipc-9.2.8.tgz",
+      "integrity": "sha512-DSzEEkbMYbAUVlhy7fg+BzccoRuSQzqHbIPGxGv19OJ2WKwS3/9ChAnQcII4g+GujcHhyJ8BUuOVAx/S5uAfQg==",
+      "dev": true,
+      "dependencies": {
+        "@node-ipc/js-queue": "2.0.3",
+        "event-pubsub": "4.3.0",
+        "js-message": "1.0.7"
+      },
+      "engines": {
+        "node": "8 || 9 || 10 || 11 || 12 || 13 || 14 || 15 || 16 || 17 || 18 || 19 || 20 || 21"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@apideck/better-ajv-errors": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmmirror.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
+      "integrity": "sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==",
+      "dev": true,
+      "dependencies": {
+        "json-schema": "^0.4.0",
+        "jsonpointer": "^5.0.0",
+        "leven": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "ajv": ">=8"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.23.4.tgz",
+      "integrity": "sha512-r1IONyb6Ia+jYR2vvIDhdWdlTGhqbBoFqLTQidzZ4kepUFH15ejXvFHxCVbtl7BOXIudsIubf4E81xeA3h3IXA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/highlight": "^7.23.4",
+        "chalk": "^2.4.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.23.3.tgz",
+      "integrity": "sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.23.3.tgz",
+      "integrity": "sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==",
+      "dev": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.22.13",
+        "@babel/generator": "^7.23.3",
+        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helpers": "^7.23.2",
+        "@babel/parser": "^7.23.3",
+        "@babel/template": "^7.22.15",
+        "@babel/traverse": "^7.23.3",
+        "@babel/types": "^7.23.3",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.23.4.tgz",
+      "integrity": "sha512-esuS49Cga3HcThFNebGhlgsrVLkvhqvYDTzgjfFFlHJcIfLe5jFmRRfCQ1KuBfc4Jrtn3ndLgKWAKjBE+IraYQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.23.4",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+      "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz",
+      "integrity": "sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz",
+      "integrity": "sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.22.9",
+        "@babel/helper-validator-option": "^7.22.15",
+        "browserslist": "^4.21.9",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.15.tgz",
+      "integrity": "sha512-jKkwA59IXcvSaiK2UN45kKwSC9o+KuoXsBDvHvU/7BecYIp8GQ2UwrVvFgJASUT+hBnwJx6MhvMCuMzwZZ7jlg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-member-expression-to-functions": "^7.22.15",
+        "@babel/helper-optimise-call-expression": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz",
+      "integrity": "sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "regexpu-core": "^5.3.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.3.tgz",
+      "integrity": "sha512-WBrLmuPP47n7PNwsZ57pqam6G/RGo1vw/87b0Blc53tZNGZ4x7YvZ6HgQe2vo1W/FR20OgjeZuGXzudPiXHFug==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.22.6",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/helper-environment-visitor": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-function-name": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-hoist-variables": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz",
+      "integrity": "sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.23.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
+      "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-simple-access": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/helper-validator-identifier": "^7.22.20"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
+      "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-remap-async-to-generator": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz",
+      "integrity": "sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-wrap-function": "^7.22.20"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz",
+      "integrity": "sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-member-expression-to-functions": "^7.22.15",
+        "@babel/helper-optimise-call-expression": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-simple-access": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+      "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
+      "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-split-export-declaration": {
+      "version": "7.22.6",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz",
+      "integrity": "sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz",
+      "integrity": "sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.22.19"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.23.4.tgz",
+      "integrity": "sha512-HfcMizYz10cr3h29VqyfGL6ZWIjTwWfvYBMsBVGwpcbhNGe3wQ1ZXZRPzZoAHhd9OqHadHqjQ89iVKINXnbzuw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.22.15",
+        "@babel/traverse": "^7.23.4",
+        "@babel/types": "^7.23.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/highlight/-/highlight-7.23.4.tgz",
+      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.4.tgz",
+      "integrity": "sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.23.3.tgz",
+      "integrity": "sha512-iRkKcCqb7iGnq9+3G6rZ+Ciz5VywC4XNRHe57lKM+jOeYAoR0lVqdeeDRfh0tQcTfw/+vBhHn926FmQhLtlFLQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.23.3.tgz",
+      "integrity": "sha512-WwlxbfMNdVEpQjZmK5mhm7oSwD3dS6eU+Iwsi4Knl9wAletWem7kaRsGOG+8UEbRyqxY4SS5zvtfXwX+jMxUwQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-transform-optional-chaining": "^7.23.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.13.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.3.tgz",
+      "integrity": "sha512-XaJak1qcityzrX0/IU5nKHb34VaibwP3saKqG6a/tppelgllOH13LUann4ZCIBcVOeE6H18K4Vx9QKkVww3z/w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-class-properties": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
+      "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-decorators": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.23.3.tgz",
+      "integrity": "sha512-u8SwzOcP0DYSsa++nHd/9exlHb0NAlHCb890qtZZbSwPX2bFv8LBEztxwN7Xg/dS8oAFFidhrI9PBcLBJSkGRQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.20",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/plugin-syntax-decorators": "^7.23.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-decorators": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.23.3.tgz",
+      "integrity": "sha512-cf7Niq4/+/juY67E0PbgH0TDhLQ5J7zS8C/Q5FFx+DWyrRa9sUQdTXkjqKu8zGvuqr7vw1muKiukseihU+PJDA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-assertions": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.23.3.tgz",
+      "integrity": "sha512-lPgDSU+SJLK3xmFDTV2ZRQAiM7UuUjGidwBywFavObCiZc1BeAAcMtHJKUya92hPHO+at63JJPLygilZard8jw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.23.3.tgz",
+      "integrity": "sha512-pawnE0P9g10xgoP7yKr6CK63K2FMsTE+FZidZO/1PwRdzmAPVs+HS1mAURUsgaoxammTJvULUdIkEK0gOcU2tA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz",
+      "integrity": "sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.23.3.tgz",
+      "integrity": "sha512-NzQcQrzaQPkaEwoTm4Mhyl8jI1huEL/WWIEvudjTCMJ9aBZNpsJbMASx7EQECtQQPS/DcnFpo0FIh3LvEO9cxQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-generator-functions": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.4.tgz",
+      "integrity": "sha512-efdkfPhHYTtn0G6n2ddrESE91fgXxjlqLsnUtPWnJs4a4mZIbUaK7ffqKIIUKXSHwcDvaCVX6GXkaJJFqtX7jw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-remap-async-to-generator": "^7.22.20",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.23.3.tgz",
+      "integrity": "sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-remap-async-to-generator": "^7.22.20"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.23.3.tgz",
+      "integrity": "sha512-vI+0sIaPIO6CNuM9Kk5VmXcMVRiOpDh7w2zZt9GXzmE/9KD70CUEVhvPR/etAeNK/FAEkhxQtXOzVF3EuRL41A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.4.tgz",
+      "integrity": "sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-properties": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.23.3.tgz",
+      "integrity": "sha512-uM+AN8yCIjDPccsKGlw271xjJtGii+xQIF/uMPS8H15L12jZTsLfF4o5vNO7d/oUguOyfdikHGc/yi9ge4SGIg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-static-block": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.23.4.tgz",
+      "integrity": "sha512-nsWu/1M+ggti1SOALj3hfx5FXzAY06fwPJsUZD4/A5e1bWi46VUIWtD+kOX6/IdhXGsXBWllLFDSnqSCdUNydQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.3.tgz",
+      "integrity": "sha512-FGEQmugvAEu2QtgtU0uTASXevfLMFfBeVCIIdcQhn/uBQsMTjBajdnAtanQlOcuihWh10PZ7+HWvc7NtBwP74w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-optimise-call-expression": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.20",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.23.3.tgz",
+      "integrity": "sha512-dTj83UVTLw/+nbiHqQSFdwO9CbTtwq1DsDqm3CUEtDrZNET5rT5E6bIdTlOftDTDLMYxvxHNEYO4B9SLl8SLZw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/template": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.23.3.tgz",
+      "integrity": "sha512-n225npDqjDIr967cMScVKHXJs7rout1q+tt50inyBCPkyZ8KxeI6d+GIbSBTT/w/9WdlWDOej3V9HE5Lgk57gw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.23.3.tgz",
+      "integrity": "sha512-vgnFYDHAKzFaTVp+mneDsIEbnJ2Np/9ng9iviHw3P/KVcgONxpNULEW/51Z/BaFojG2GI2GwwXck5uV1+1NOYQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.23.3.tgz",
+      "integrity": "sha512-RrqQ+BQmU3Oyav3J+7/myfvRCq7Tbz+kKLLshUmMwNlDHExbGL7ARhajvoBJEvc+fCguPPu887N+3RRXBVKZUA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dynamic-import": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.23.4.tgz",
+      "integrity": "sha512-V6jIbLhdJK86MaLh4Jpghi8ho5fGzt3imHOBu/x0jlBaPYqDoWz4RDXjmMOfnh+JWNaQleEAByZLV0QzBT4YQQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.23.3.tgz",
+      "integrity": "sha512-5fhCsl1odX96u7ILKHBj4/Y8vipoqwsJMh4csSA8qFfxrZDEA4Ssku2DyNvMJSmZNOEBT750LfFPbtrnTP90BQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-export-namespace-from": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.23.4.tgz",
+      "integrity": "sha512-GzuSBcKkx62dGzZI1WVgTWvkkz84FZO5TC5T8dl/Tht/rAla6Dg/Mz9Yhypg+ezVACf/rgDuQt3kbWEv7LdUDQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.23.3.tgz",
+      "integrity": "sha512-X8jSm8X1CMwxmK878qsUGJRmbysKNbdpTv/O1/v0LuY/ZkZrng5WYiekYSdg9m09OTmDDUWeEDsTE+17WYbAZw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.23.3.tgz",
+      "integrity": "sha512-I1QXp1LxIvt8yLaib49dRW5Okt7Q4oaxao6tFVKS/anCdEOMtYwWVKoiOA1p34GOWIZjUK0E+zCp7+l1pfQyiw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-json-strings": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.23.4.tgz",
+      "integrity": "sha512-81nTOqM1dMwZ/aRXQ59zVubN9wHGqk6UtqRK+/q+ciXmRy8fSolhGVvG09HHRGo4l6fr/c4ZhXUQH0uFW7PZbg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-literals": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.23.3.tgz",
+      "integrity": "sha512-wZ0PIXRxnwZvl9AYpqNUxpZ5BiTGrYt7kueGQ+N5FiQ7RCOD4cm8iShd6S6ggfVIWaJf2EMk8eRzAh52RfP4rQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.23.4.tgz",
+      "integrity": "sha512-Mc/ALf1rmZTP4JKKEhUwiORU+vcfarFVLfcFiolKUo6sewoxSEgl36ak5t+4WamRsNr6nzjZXQjM35WsU+9vbg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.23.3.tgz",
+      "integrity": "sha512-sC3LdDBDi5x96LA+Ytekz2ZPk8i/Ck+DEuDbRAll5rknJ5XRTSaPKEYwomLcs1AA8wg9b3KjIQRsnApj+q51Ag==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-amd": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.23.3.tgz",
+      "integrity": "sha512-vJYQGxeKM4t8hYCKVBlZX/gtIY2I7mRGFNcm85sgXGMTBcoV3QdVtdpbcWEbzbfUIUZKwvgFT82mRvaQIebZzw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz",
+      "integrity": "sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-simple-access": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.3.tgz",
+      "integrity": "sha512-ZxyKGTkF9xT9YJuKQRo19ewf3pXpopuYQd8cDXqNzc3mUNbOME0RKMoZxviQk74hwzfQsEe66dE92MaZbdHKNQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.23.3.tgz",
+      "integrity": "sha512-zHsy9iXX2nIsCBFPud3jKn1IRPWg3Ing1qOZgeKV39m1ZgIdpJqvlWVeiHBZC6ITRG0MfskhYe9cLgntfSFPIg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
+      "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.23.3.tgz",
+      "integrity": "sha512-YJ3xKqtJMAT5/TIZnpAR3I+K+WaDowYbN3xyxI8zxx/Gsypwf9B9h0VB+1Nh6ACAAPRS5NSRje0uVv5i79HYGQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.23.4.tgz",
+      "integrity": "sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-numeric-separator": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.23.4.tgz",
+      "integrity": "sha512-mps6auzgwjRrwKEZA05cOwuDc9FAzoyFS4ZsG/8F43bTLf/TgkJg7QXOrPO1JO599iA3qgK9MXdMGOEC8O1h6Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-rest-spread": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.23.4.tgz",
+      "integrity": "sha512-9x9K1YyeQVw0iOXJlIzwm8ltobIIv7j2iLyP2jIhEbqPRQ7ScNgwQufU2I0Gq11VjyG4gI4yMXt2VFags+1N3g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.23.3",
+        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.23.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.23.3.tgz",
+      "integrity": "sha512-BwQ8q0x2JG+3lxCVFohg+KbQM7plfpBwThdW9A6TMtWwLsbDA01Ek2Zb/AgDN39BiZsExm4qrXxjk+P1/fzGrA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.20"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.23.4.tgz",
+      "integrity": "sha512-XIq8t0rJPHf6Wvmbn9nFxU6ao4c7WhghTR5WyV8SrJfUFzyxhCm4nhC+iAp3HFhbAKLfYpgzhJ6t4XCtVwqO5A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-chaining": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.4.tgz",
+      "integrity": "sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.23.3.tgz",
+      "integrity": "sha512-09lMt6UsUb3/34BbECKVbVwrT9bO6lILWln237z7sLaWnMsTi7Yc9fhX5DLpkJzAGfaReXI22wP41SZmnAA3Vw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-methods": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.23.3.tgz",
+      "integrity": "sha512-UzqRcRtWsDMTLrRWFvUBDwmw06tCQH9Rl1uAjfh6ijMSmGYQ+fpdB+cnqRC8EMh5tuuxSv0/TejGL+7vyj+50g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-property-in-object": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.23.4.tgz",
+      "integrity": "sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.23.3.tgz",
+      "integrity": "sha512-jR3Jn3y7cZp4oEWPFAlRsSWjxKe4PZILGBSd4nis1TsC5qeSpb+nrtihJuDhNI7QHiVbUaiXa0X2RZY3/TI6Nw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regenerator": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.23.3.tgz",
+      "integrity": "sha512-KP+75h0KghBMcVpuKisx3XTu9Ncut8Q8TuvGO4IhY+9D5DFEckQefOuIsB/gQ2tG71lCke4NMrtIPS8pOj18BQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "regenerator-transform": "^0.15.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.23.3.tgz",
+      "integrity": "sha512-QnNTazY54YqgGxwIexMZva9gqbPa15t/x9VS+0fsEFWplwVpXYZivtgl43Z1vMpc1bdPP2PP8siFeVcnFvA3Cg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.23.4.tgz",
+      "integrity": "sha512-ITwqpb6V4btwUG0YJR82o2QvmWrLgDnx/p2A3CTPYGaRgULkDiC0DRA2C4jlRB9uXGUEfaSS/IGHfVW+ohzYDw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "babel-plugin-polyfill-corejs2": "^0.4.6",
+        "babel-plugin-polyfill-corejs3": "^0.8.5",
+        "babel-plugin-polyfill-regenerator": "^0.5.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.23.3.tgz",
+      "integrity": "sha512-ED2fgqZLmexWiN+YNFX26fx4gh5qHDhn1O2gvEhreLW2iI63Sqm4llRLCXALKrCnbN4Jy0VcMQZl/SAzqug/jg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-spread": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.23.3.tgz",
+      "integrity": "sha512-VvfVYlrlBVu+77xVTOAoxQ6mZbnIq5FM0aGBSFEcIh03qHf+zNqA4DC/3XMUozTg7bZV3e3mZQ0i13VB6v5yUg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.23.3.tgz",
+      "integrity": "sha512-HZOyN9g+rtvnOU3Yh7kSxXrKbzgrm5X4GncPY1QOquu7epga5MxKHVpYu2hvQnry/H+JjckSYRb93iNfsioAGg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.23.3.tgz",
+      "integrity": "sha512-Flok06AYNp7GV2oJPZZcP9vZdszev6vPBkHLwxwSpaIqx75wn6mUd3UFWsSsA0l8nXAKkyCmL/sR02m8RYGeHg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.23.3.tgz",
+      "integrity": "sha512-4t15ViVnaFdrPC74be1gXBSMzXk3B4Us9lP7uLRQHTFpV5Dvt33pn+2MyyNxmN3VTTm3oTrZVMUmuw3oBnQ2oQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.23.3.tgz",
+      "integrity": "sha512-OMCUx/bU6ChE3r4+ZdylEqAjaQgHAgipgW8nsCfu5pGqDcFytVd91AwRvUJSBZDz0exPGgnjoqhgRYLRjFZc9Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.23.3.tgz",
+      "integrity": "sha512-KcLIm+pDZkWZQAFJ9pdfmh89EwVfmNovFBcXko8szpBeF8z68kWIPeKlmSOkT9BXJxs2C0uk+5LxoxIv62MROA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.23.3.tgz",
+      "integrity": "sha512-wMHpNA4x2cIA32b/ci3AfwNgheiva2W0WUKWTK7vBHBhDKfPsc5cFGNWm69WBqpwd86u1qwZ9PWevKqm1A3yAw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.23.3.tgz",
+      "integrity": "sha512-W7lliA/v9bNR83Qc3q1ip9CQMZ09CcHDbHfbLRDNuAhn1Mvkr1ZNF7hPmztMQvtTGVLJ9m8IZqWsTkXOml8dbw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/preset-env": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/preset-env/-/preset-env-7.23.3.tgz",
+      "integrity": "sha512-ovzGc2uuyNfNAs/jyjIGxS8arOHS5FENZaNn4rtE7UdKMMkqHCvboHfcuhWLZNX5cB44QfcGNWjaevxMzzMf+Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.23.3",
+        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.15",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.23.3",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.23.3",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.23.3",
+        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-import-assertions": "^7.23.3",
+        "@babel/plugin-syntax-import-attributes": "^7.23.3",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.23.3",
+        "@babel/plugin-transform-async-generator-functions": "^7.23.3",
+        "@babel/plugin-transform-async-to-generator": "^7.23.3",
+        "@babel/plugin-transform-block-scoped-functions": "^7.23.3",
+        "@babel/plugin-transform-block-scoping": "^7.23.3",
+        "@babel/plugin-transform-class-properties": "^7.23.3",
+        "@babel/plugin-transform-class-static-block": "^7.23.3",
+        "@babel/plugin-transform-classes": "^7.23.3",
+        "@babel/plugin-transform-computed-properties": "^7.23.3",
+        "@babel/plugin-transform-destructuring": "^7.23.3",
+        "@babel/plugin-transform-dotall-regex": "^7.23.3",
+        "@babel/plugin-transform-duplicate-keys": "^7.23.3",
+        "@babel/plugin-transform-dynamic-import": "^7.23.3",
+        "@babel/plugin-transform-exponentiation-operator": "^7.23.3",
+        "@babel/plugin-transform-export-namespace-from": "^7.23.3",
+        "@babel/plugin-transform-for-of": "^7.23.3",
+        "@babel/plugin-transform-function-name": "^7.23.3",
+        "@babel/plugin-transform-json-strings": "^7.23.3",
+        "@babel/plugin-transform-literals": "^7.23.3",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.23.3",
+        "@babel/plugin-transform-member-expression-literals": "^7.23.3",
+        "@babel/plugin-transform-modules-amd": "^7.23.3",
+        "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+        "@babel/plugin-transform-modules-systemjs": "^7.23.3",
+        "@babel/plugin-transform-modules-umd": "^7.23.3",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
+        "@babel/plugin-transform-new-target": "^7.23.3",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.3",
+        "@babel/plugin-transform-numeric-separator": "^7.23.3",
+        "@babel/plugin-transform-object-rest-spread": "^7.23.3",
+        "@babel/plugin-transform-object-super": "^7.23.3",
+        "@babel/plugin-transform-optional-catch-binding": "^7.23.3",
+        "@babel/plugin-transform-optional-chaining": "^7.23.3",
+        "@babel/plugin-transform-parameters": "^7.23.3",
+        "@babel/plugin-transform-private-methods": "^7.23.3",
+        "@babel/plugin-transform-private-property-in-object": "^7.23.3",
+        "@babel/plugin-transform-property-literals": "^7.23.3",
+        "@babel/plugin-transform-regenerator": "^7.23.3",
+        "@babel/plugin-transform-reserved-words": "^7.23.3",
+        "@babel/plugin-transform-shorthand-properties": "^7.23.3",
+        "@babel/plugin-transform-spread": "^7.23.3",
+        "@babel/plugin-transform-sticky-regex": "^7.23.3",
+        "@babel/plugin-transform-template-literals": "^7.23.3",
+        "@babel/plugin-transform-typeof-symbol": "^7.23.3",
+        "@babel/plugin-transform-unicode-escapes": "^7.23.3",
+        "@babel/plugin-transform-unicode-property-regex": "^7.23.3",
+        "@babel/plugin-transform-unicode-regex": "^7.23.3",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.23.3",
+        "@babel/preset-modules": "0.1.6-no-external-plugins",
+        "babel-plugin-polyfill-corejs2": "^0.4.6",
+        "babel-plugin-polyfill-corejs3": "^0.8.5",
+        "babel-plugin-polyfill-regenerator": "^0.5.3",
+        "core-js-compat": "^3.31.0",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-modules": {
+      "version": "0.1.6-no-external-plugins",
+      "resolved": "https://registry.npmmirror.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmmirror.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==",
+      "dev": true
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.23.4.tgz",
+      "integrity": "sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==",
+      "dev": true,
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.22.15.tgz",
+      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.22.13",
+        "@babel/parser": "^7.22.15",
+        "@babel/types": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.23.4.tgz",
+      "integrity": "sha512-IYM8wSUwunWTB6tFC2dkKZhxbIjHoWemdK+3f8/wq8aKhbUscxD5MX72ubd90fxvFknaLPeGw5ycU84V1obHJg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.23.4",
+        "@babel/generator": "^7.23.4",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.23.4",
+        "@babel/types": "^7.23.4",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.23.4.tgz",
+      "integrity": "sha512-7uIFwVYpoplT5jp/kVv6EF93VaJ8H+Yn5IczYiaAi98ajzjfoZfslet/e0sLh+wVBjb2qqIut1b0S26VSafsSQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@csstools/cascade-layer-name-parser": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.5.tgz",
+      "integrity": "sha512-v/5ODKNBMfBl0us/WQjlfsvSlYxfZLhNMVIsuCPib2ulTwGKYbKJbwqw671+qH9Y4wvWVnu7LBChvml/wBKjFg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-3.0.2.tgz",
+      "integrity": "sha512-NMVs/l7Y9eIKL5XjbCHEgGcG8LOUT2qVcRjX6EzkCdlvftHVKr2tHIPzHavfrULRZ5Q2gxrJ9f44dAlj6fX97Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-1.1.4.tgz",
+      "integrity": "sha512-ZV1TSmToiNcQL1P3hfzlzZzA02mmVkVmXGaUDUqpYUG84PmLhVSZpKX+KfxAuOcK7de04UXSQPBrAvaya6iiGg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-1.4.0.tgz",
+      "integrity": "sha512-SlGd8E6ron24JYQPQAIzu5tvmWi1H4sDKTdA7UDnwF45oJv7AVESbOlOO1YjfBhrQFuvLWUgKiOY9DwGoAxwTA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/color-helpers": "^3.0.2",
+        "@csstools/css-calc": "^1.1.4"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.2.tgz",
+      "integrity": "sha512-sLYGdAdEY2x7TSw9FtmdaTrh2wFtRJO5VMbBrA8tEqEod7GEggFmxTSK9XqExib3yMuYNcvcTdCZIP6ukdjAIA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^2.2.1"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.1.tgz",
+      "integrity": "sha512-Zmsf2f/CaEPWEVgw29odOj+WEVoiJy9s9NOv5GgNY9mZ1CZ7394By6wONrONrTsnNDv6F9hR02nvFihrGVGHBg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      }
+    },
+    "node_modules/@csstools/media-query-list-parser": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.5.tgz",
+      "integrity": "sha512-IxVBdYzR8pYe89JiyXQuYk4aVVoCPhMJkz6ElRwlVysjwURTsTk/bmY/z4FfeRE+CRBMlykPwXEVUg8lThv7AQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      }
+    },
+    "node_modules/@csstools/postcss-cascade-layers": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.1.tgz",
+      "integrity": "sha512-UYFuFL9GgVnftg9v7tBvVEBRLaBeAD66euD+yYy5fYCUld9ZIWTJNCE30hm6STMEdt6FL5xzeVw1lAZ1tpvUEg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/selector-specificity": "^3.0.0",
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-color-function": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-3.0.7.tgz",
+      "integrity": "sha512-/PIB20G1TPCXmQlaJLWIYzTZRZpj6csT4ijgnshIj/kcmniIRroAfDa0xSWnfuO1eNo0NptIaPU7jzUukWn55Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-color-mix-function": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-2.0.7.tgz",
+      "integrity": "sha512-57/g8aGo5eKFjEeJMiRKh8Qq43K2rCyk5ZZTvJ34TNl4zUtYU5DvLkIkOnhCtL8/a4z9oMA42aOnFPddRrScUQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-exponential-functions": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-exponential-functions/-/postcss-exponential-functions-1.0.1.tgz",
+      "integrity": "sha512-ZLK2iSK4DUxeypGce2PnQSdYugUqDTwxnhNiq1o6OyKMNYgYs4eKbvEhFG8JKr1sJWbeqBi5jRr0017l2EWVvg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-calc": "^1.1.4",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-font-format-keywords": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-3.0.0.tgz",
+      "integrity": "sha512-ntkGj+1uDa/u6lpjPxnkPcjJn7ChO/Kcy08YxctOZI7vwtrdYvFhmE476dq8bj1yna306+jQ9gzXIG/SWfOaRg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-gamut-mapping": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-gamut-mapping/-/postcss-gamut-mapping-1.0.0.tgz",
+      "integrity": "sha512-6UQyK8l9YaG5Ao5rBDcCnKHrLsHiQ1E0zeFQuqDJqEtinVzAPb/MwSw3TenZXL1Rnd7th3tb+4CBFHBXdW5tbQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-gradients-interpolation-method": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-4.0.7.tgz",
+      "integrity": "sha512-GT1CzE/Tyr/ei4j5BwKESkHAgg+Gzys/0mAY7W+UiR+XrcYk5hDbOrE/YJIx1rflfO/7La1bDoZtA0YnLl4qNA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-hwb-function": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-3.0.6.tgz",
+      "integrity": "sha512-uQgWt2Ho2yy2S6qthWY7mD5v57NKxi6dD1NB8nAybU5bJSsm+hLXRGm3/zbOH4xNrqO3Cl60DFSNlSrUME3Xjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-ic-unit": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-3.0.2.tgz",
+      "integrity": "sha512-n28Er7W9qc48zNjJnvTKuVHY26/+6YlA9WzJRksIHiAWOMxSH5IksXkw7FpkIOd+jLi59BMrX/BWrZMgjkLBHg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-initial": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-initial/-/postcss-initial-1.0.0.tgz",
+      "integrity": "sha512-1l7iHHjIl5qmVeGItugr4ZOlCREDP71mNKqoEyxlosIoiu3Os1nPWMHpuCvDLCLiWI/ONTOg3nzJh7gwHOrqUA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-is-pseudo-class": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-4.0.3.tgz",
+      "integrity": "sha512-/dt5M9Ty/x3Yiq0Nm/5PJJzwkVFchJgdjKVnryBPtoMCb9ohb/nDIJOwr/Wr3hK3FDs1EA1GE6PyRYsUmQPS8Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/selector-specificity": "^3.0.0",
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-logical-float-and-clear": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-float-and-clear/-/postcss-logical-float-and-clear-2.0.0.tgz",
+      "integrity": "sha512-Wki4vxsF6icRvRz8eF9bPpAvwaAt0RHwhVOyzfoFg52XiIMjb6jcbHkGxwpJXP4DVrnFEwpwmrz5aTRqOW82kg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-logical-overflow": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overflow/-/postcss-logical-overflow-1.0.0.tgz",
+      "integrity": "sha512-cIrZ8f7bGGvr+W53nEuMspcwaeaI2YTmz6LZ4yiAO5z14/PQgOOv+Pn+qjvPOPoadeY2BmpaoTzZKvdAQuM17w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-logical-overscroll-behavior": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overscroll-behavior/-/postcss-logical-overscroll-behavior-1.0.0.tgz",
+      "integrity": "sha512-e89S2LWjnxf0SB2wNUAbqDyFb/Fow/tlOe1XqOLbNx4rf3LrQokM9qldVx7sarnddml3ORE5LDUmlKpPOOeJTA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-logical-resize": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-resize/-/postcss-logical-resize-2.0.0.tgz",
+      "integrity": "sha512-lCQ1aX8c5+WI4t5EoYf3alTzJNNocMqTb+u1J9CINdDhFh1fjovqK+0aHalUHsNstZmzFPNzIkU4Mb3eM9U8SA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-logical-viewport-units": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-2.0.3.tgz",
+      "integrity": "sha512-xeVxqND5rlQyqLGdH7rX34sIm/JbbQKxpKQP8oD1YQqUHHCLQR9NUS57WqJKajxKN6AcNAMWJhb5LUH5RfPcyA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-tokenizer": "^2.2.1"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-media-minmax": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-1.1.0.tgz",
+      "integrity": "sha512-t5Li/DPC5QmW/6VFLfUvsw/4dNYYseWR0tOXDeJg/9EKUodBgNawz5tuk5vYKtNvoj+Q08odMuXcpS5YJj0AFA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-calc": "^1.1.4",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/media-query-list-parser": "^2.1.5"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-2.0.3.tgz",
+      "integrity": "sha512-IPL8AvnwMYW+cWtp+j8cW3MFN0RyXNT4hLOvs6Rf2N+NcbvXhSyKxZuE3W9Cv4KjaNoNoGx1d0UhT6tktq6tUw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/media-query-list-parser": "^2.1.5"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-nested-calc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-3.0.0.tgz",
+      "integrity": "sha512-HsB66aDWAouOwD/GcfDTS0a7wCuVWaTpXcjl5VKP0XvFxDiU+r0T8FG7xgb6ovZNZ+qzvGIwRM+CLHhDgXrYgQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-normalize-display-values": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-3.0.1.tgz",
+      "integrity": "sha512-nUvRxI+ALJwkxZdPU4EDyuM380vP91sAGvI3jAOHs/sr3jfcCOzLkY6xKI1Mr526kZ3RivmMoYM/xq+XFyE/bw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-oklab-function": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-3.0.7.tgz",
+      "integrity": "sha512-vBFTQD3CARB3u/XIGO44wWbcO7xG/4GsYqJlcPuUGRSK8mtxes6n4vvNFlIByyAZy2k4d4RY63nyvTbMpeNTaQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-progressive-custom-properties": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-3.0.2.tgz",
+      "integrity": "sha512-YEvTozk1SxnV/PGL5DllBVDuLQ+jiQhyCSQiZJ6CwBMU5JQ9hFde3i1qqzZHuclZfptjrU0JjlX4ePsOhxNzHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-relative-color-syntax": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-2.0.7.tgz",
+      "integrity": "sha512-2AiFbJSVF4EyymLxme4JzSrbXykHolx8DdZECHjYKMhoulhKLltx5ccYgtrK3BmXGd3v3nJrWFCc8JM8bjuiOg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-scope-pseudo-class": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-3.0.0.tgz",
+      "integrity": "sha512-GFNVsD97OuEcfHmcT0/DAZWAvTM/FFBDQndIOLawNc1Wq8YqpZwBdHa063Lq+Irk7azygTT+Iinyg3Lt76p7rg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-stepped-value-functions": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-3.0.2.tgz",
+      "integrity": "sha512-I3wX44MZVv+tDuWfrd3BTvRB/YRIM2F5v1MBtTI89sxpFn47mNpTwpPYUOGPVCgKlRDfZSlxIUYhUQmqRQZZFQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-calc": "^1.1.4",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-text-decoration-shorthand": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-3.0.3.tgz",
+      "integrity": "sha512-d5J9m49HhqXRcw1S6vTZuviHi/iknUKGjBpChiNK1ARg9sSa3b8m5lsWz5Izs8ISORZdv2bZRwbw5Z2R6gQ9kQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/color-helpers": "^3.0.2",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-trigonometric-functions": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-3.0.2.tgz",
+      "integrity": "sha512-AwzNhF4QOKaLOKvMljwwFkeYXwufhRO15G+kKohHkyoNOL75xWkN+W2Y9ik9tSeAyDv+cYNlYaF+o/a79WjVjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-calc": "^1.1.4",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-unset-value": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-3.0.0.tgz",
+      "integrity": "sha512-P0JD1WHh3avVyKKRKjd0dZIjCEeaBer8t1BbwGMUDtSZaLhXlLNBqZ8KkqHzYWXOJgHleXAny2/sx8LYl6qhEA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz",
+      "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@hapi/hoek": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
+      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==",
+      "dev": true
+    },
+    "node_modules/@hapi/topo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/@hapi/topo/-/topo-5.1.0.tgz",
+      "integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
+      "dev": true,
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.20",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
+      "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@leichtgewicht/ip-codec": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
+      "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
+      "dev": true
+    },
+    "node_modules/@node-ipc/js-queue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/@node-ipc/js-queue/-/js-queue-2.0.3.tgz",
+      "integrity": "sha512-fL1wpr8hhD5gT2dA1qifeVaoDFlQR5es8tFuKqjHX+kdOtdNHnxkVZbtIrR2rxnMFvehkjaZRNV2H/gPXlb0hw==",
+      "dev": true,
+      "dependencies": {
+        "easy-stack": "1.0.1"
+      },
+      "engines": {
+        "node": ">=1.0.0"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.23",
+      "resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.23.tgz",
+      "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==",
+      "dev": true
+    },
+    "node_modules/@rollup/plugin-babel": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
+      "integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.10.4",
+        "@rollup/pluginutils": "^3.1.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@types/babel__core": "^7.1.9",
+        "rollup": "^1.20.0||^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/babel__core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "11.2.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
+      "integrity": "sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
+        "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve/node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@rollup/plugin-replace": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz",
+      "integrity": "sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^3.1.0",
+        "magic-string": "^0.25.7"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0 || ^2.0.0"
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0"
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true
+    },
+    "node_modules/@sideway/address": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
+      "integrity": "sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==",
+      "dev": true,
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "node_modules/@sideway/formula": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/@sideway/formula/-/formula-3.0.1.tgz",
+      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==",
+      "dev": true
+    },
+    "node_modules/@sideway/pinpoint": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
+      "dev": true
+    },
+    "node_modules/@soda/friendly-errors-webpack-plugin": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
+      "integrity": "sha512-h2ooWqP8XuFqTXT+NyAFbrArzfQA7R6HTezADrvD9Re8fxMLTPPniLdqVTdDaO0eIoLaAwKT+d6w+5GeTk7Vbg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^3.0.0",
+        "error-stack-parser": "^2.0.6",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/@soda/friendly-errors-webpack-plugin/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@soda/friendly-errors-webpack-plugin/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@soda/friendly-errors-webpack-plugin/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@soda/friendly-errors-webpack-plugin/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@soda/friendly-errors-webpack-plugin/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@soda/friendly-errors-webpack-plugin/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@soda/get-current-script": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz",
+      "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
+      "dev": true
+    },
+    "node_modules/@surma/rollup-plugin-off-main-thread": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
+      "integrity": "sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==",
+      "dev": true,
+      "dependencies": {
+        "ejs": "^3.1.6",
+        "json5": "^2.2.0",
+        "magic-string": "^0.25.0",
+        "string.prototype.matchall": "^4.0.6"
+      }
+    },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.5",
+      "resolved": "https://registry.npmmirror.com/@types/body-parser/-/body-parser-1.19.5.tgz",
+      "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==",
+      "dev": true,
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/bonjour": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmmirror.com/@types/bonjour/-/bonjour-3.5.13.tgz",
+      "integrity": "sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.38",
+      "resolved": "https://registry.npmmirror.com/@types/connect/-/connect-3.4.38.tgz",
+      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect-history-api-fallback": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmmirror.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz",
+      "integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==",
+      "dev": true,
+      "dependencies": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/eslint": {
+      "version": "8.44.7",
+      "resolved": "https://registry.npmmirror.com/@types/eslint/-/eslint-8.44.7.tgz",
+      "integrity": "sha512-f5ORu2hcBbKei97U73mf+l9t4zTGl74IqZ0GQk4oVea/VS8tQZYkUveSYojk+frraAVYId0V2WC9O4PTNru2FQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmmirror.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
+      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
+      "dev": true,
+      "dependencies": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
+    },
+    "node_modules/@types/express": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/@types/express/-/express-4.17.21.tgz",
+      "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.33",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.17.41",
+      "resolved": "https://registry.npmmirror.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.41.tgz",
+      "integrity": "sha512-OaJ7XLaelTgrvlZD8/aa0vvvxZdUmlCn6MtWeB7TkiKW70BQLc9XEPpDLPdbo52ZhXUCrznlWdCHWxJWtdyajA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      }
+    },
+    "node_modules/@types/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
+      "dev": true
+    },
+    "node_modules/@types/http-errors": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/@types/http-errors/-/http-errors-2.0.4.tgz",
+      "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==",
+      "dev": true
+    },
+    "node_modules/@types/http-proxy": {
+      "version": "1.17.14",
+      "resolved": "https://registry.npmmirror.com/@types/http-proxy/-/http-proxy-1.17.14.tgz",
+      "integrity": "sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true
+    },
+    "node_modules/@types/mime": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmmirror.com/@types/mime/-/mime-1.3.5.tgz",
+      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
+      "dev": true
+    },
+    "node_modules/@types/minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmmirror.com/@types/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==",
+      "dev": true
+    },
+    "node_modules/@types/node": {
+      "version": "20.10.0",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.10.0.tgz",
+      "integrity": "sha512-D0WfRmU9TQ8I9PFx9Yc+EBHw+vSpIub4IDvQivcp26PtPrdMGAq5SDcpXEo/epqa/DXotVpekHiLNTg3iaKXBQ==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/@types/node-forge": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmmirror.com/@types/node-forge/-/node-forge-1.3.10.tgz",
+      "integrity": "sha512-y6PJDYN4xYBxwd22l+OVH35N+1fCYWiuC3aiP2SlXVE6Lo7SS+rSx9r89hLxrP4pn6n1lBGhHJ12pj3F3Mpttw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/normalize-package-data": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz",
+      "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
+      "dev": true
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "dev": true
+    },
+    "node_modules/@types/qs": {
+      "version": "6.9.10",
+      "resolved": "https://registry.npmmirror.com/@types/qs/-/qs-6.9.10.tgz",
+      "integrity": "sha512-3Gnx08Ns1sEoCrWssEgTSJs/rsT2vhGP+Ja9cnnk9k4ALxinORlQneLXFeFKOTJMOeZUFD1s7w+w2AphTpvzZw==",
+      "dev": true
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmmirror.com/@types/range-parser/-/range-parser-1.2.7.tgz",
+      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
+      "dev": true
+    },
+    "node_modules/@types/resolve": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmmirror.com/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmmirror.com/@types/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
+      "dev": true
+    },
+    "node_modules/@types/send": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmmirror.com/@types/send/-/send-0.17.4.tgz",
+      "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==",
+      "dev": true,
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/serve-index": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmmirror.com/@types/serve-index/-/serve-index-1.9.4.tgz",
+      "integrity": "sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==",
+      "dev": true,
+      "dependencies": {
+        "@types/express": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmmirror.com/@types/serve-static/-/serve-static-1.15.5.tgz",
+      "integrity": "sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/http-errors": "*",
+        "@types/mime": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/sockjs": {
+      "version": "0.3.36",
+      "resolved": "https://registry.npmmirror.com/@types/sockjs/-/sockjs-0.3.36.tgz",
+      "integrity": "sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true
+    },
+    "node_modules/@types/ws": {
+      "version": "8.5.10",
+      "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.10.tgz",
+      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@vant/touch-emulator": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vant/touch-emulator/-/touch-emulator-1.4.0.tgz",
+      "integrity": "sha512-Zt+zISV0+wpOew2S1siOJ3G22y+hapHAKmXM+FhpvWzsRc4qahaYXatCAITuuXt0EcDp7WvEeTO4F7p9AtX/pw=="
+    },
+    "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
+      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==",
+      "dev": true
+    },
+    "node_modules/@vue/babel-helper-vue-transform-on": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.1.5.tgz",
+      "integrity": "sha512-SgUymFpMoAyWeYWLAY+MkCK3QEROsiUnfaw5zxOVD/M64KQs8D/4oK6Q5omVA2hnvEOE0SCkH2TZxs/jnnUj7w==",
+      "dev": true
+    },
+    "node_modules/@vue/babel-plugin-jsx": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.5.tgz",
+      "integrity": "sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.22.5",
+        "@babel/template": "^7.22.5",
+        "@babel/traverse": "^7.22.5",
+        "@babel/types": "^7.22.5",
+        "@vue/babel-helper-vue-transform-on": "^1.1.5",
+        "camelcase": "^6.3.0",
+        "html-tags": "^3.3.1",
+        "svg-tags": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@vue/babel-plugin-transform-vue-jsx": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.4.0.tgz",
+      "integrity": "sha512-Fmastxw4MMx0vlgLS4XBX0XiBbUFzoMGeVXuMV08wyOfXdikAFqBTuYPR0tlk+XskL19EzHc39SgjrPGY23JnA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/plugin-syntax-jsx": "^7.2.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+        "html-tags": "^2.0.0",
+        "lodash.kebabcase": "^4.1.1",
+        "svg-tags": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@vue/babel-plugin-transform-vue-jsx/node_modules/html-tags": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/html-tags/-/html-tags-2.0.0.tgz",
+      "integrity": "sha512-+Il6N8cCo2wB/Vd3gqy/8TZhTD3QvcVeQLCnZiGkGCH3JP28IgGAY41giccp2W4R3jfyJPAP318FQTa1yU7K7g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@vue/babel-preset-app": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-preset-app/-/babel-preset-app-5.0.8.tgz",
+      "integrity": "sha512-yl+5qhpjd8e1G4cMXfORkkBlvtPCIgmRf3IYCWYDKIQ7m+PPa5iTm4feiNmCMD6yGqQWMhhK/7M3oWGL9boKwg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.12.16",
+        "@babel/helper-compilation-targets": "^7.12.16",
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-proposal-class-properties": "^7.12.13",
+        "@babel/plugin-proposal-decorators": "^7.12.13",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/plugin-transform-runtime": "^7.12.15",
+        "@babel/preset-env": "^7.12.16",
+        "@babel/runtime": "^7.12.13",
+        "@vue/babel-plugin-jsx": "^1.0.3",
+        "@vue/babel-preset-jsx": "^1.1.2",
+        "babel-plugin-dynamic-import-node": "^2.3.3",
+        "core-js": "^3.8.3",
+        "core-js-compat": "^3.8.3",
+        "semver": "^7.3.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "*",
+        "core-js": "^3",
+        "vue": "^2 || ^3.2.13"
+      },
+      "peerDependenciesMeta": {
+        "core-js": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-preset-app/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@vue/babel-preset-app/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@vue/babel-preset-app/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "node_modules/@vue/babel-preset-jsx": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.4.0.tgz",
+      "integrity": "sha512-QmfRpssBOPZWL5xw7fOuHNifCQcNQC1PrOo/4fu6xlhlKJJKSA3HqX92Nvgyx8fqHZTUGMPHmFA+IDqwXlqkSA==",
+      "dev": true,
+      "dependencies": {
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+        "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
+        "@vue/babel-sugar-composition-api-inject-h": "^1.4.0",
+        "@vue/babel-sugar-composition-api-render-instance": "^1.4.0",
+        "@vue/babel-sugar-functional-vue": "^1.4.0",
+        "@vue/babel-sugar-inject-h": "^1.4.0",
+        "@vue/babel-sugar-v-model": "^1.4.0",
+        "@vue/babel-sugar-v-on": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "vue": "*"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-sugar-composition-api-inject-h": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-sugar-composition-api-inject-h/-/babel-sugar-composition-api-inject-h-1.4.0.tgz",
+      "integrity": "sha512-VQq6zEddJHctnG4w3TfmlVp5FzDavUSut/DwR0xVoe/mJKXyMcsIibL42wPntozITEoY90aBV0/1d2KjxHU52g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/plugin-syntax-jsx": "^7.2.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@vue/babel-sugar-composition-api-render-instance": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-sugar-composition-api-render-instance/-/babel-sugar-composition-api-render-instance-1.4.0.tgz",
+      "integrity": "sha512-6ZDAzcxvy7VcnCjNdHJ59mwK02ZFuP5CnucloidqlZwVQv5CQLijc3lGpR7MD3TWFi78J7+a8J56YxbCtHgT9Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/plugin-syntax-jsx": "^7.2.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@vue/babel-sugar-functional-vue": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.4.0.tgz",
+      "integrity": "sha512-lTEB4WUFNzYt2In6JsoF9sAYVTo84wC4e+PoZWSgM6FUtqRJz7wMylaEhSRgG71YF+wfLD6cc9nqVeXN2rwBvw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/plugin-syntax-jsx": "^7.2.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@vue/babel-sugar-inject-h": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.4.0.tgz",
+      "integrity": "sha512-muwWrPKli77uO2fFM7eA3G1lAGnERuSz2NgAxuOLzrsTlQl8W4G+wwbM4nB6iewlKbwKRae3nL03UaF5ffAPMA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/plugin-syntax-jsx": "^7.2.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@vue/babel-sugar-v-model": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.4.0.tgz",
+      "integrity": "sha512-0t4HGgXb7WHYLBciZzN5s0Hzqan4Ue+p/3FdQdcaHAb7s5D9WZFGoSxEZHrR1TFVZlAPu1bejTKGeAzaaG3NCQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/plugin-syntax-jsx": "^7.2.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+        "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
+        "camelcase": "^5.0.0",
+        "html-tags": "^2.0.0",
+        "svg-tags": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@vue/babel-sugar-v-model/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@vue/babel-sugar-v-model/node_modules/html-tags": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/html-tags/-/html-tags-2.0.0.tgz",
+      "integrity": "sha512-+Il6N8cCo2wB/Vd3gqy/8TZhTD3QvcVeQLCnZiGkGCH3JP28IgGAY41giccp2W4R3jfyJPAP318FQTa1yU7K7g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@vue/babel-sugar-v-on": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.4.0.tgz",
+      "integrity": "sha512-m+zud4wKLzSKgQrWwhqRObWzmTuyzl6vOP7024lrpeJM4x2UhQtRDLgYjXAw9xBXjCwS0pP9kXjg91F9ZNo9JA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/plugin-syntax-jsx": "^7.2.0",
+        "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
+        "camelcase": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@vue/babel-sugar-v-on/node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@vue/cli-overlay": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-overlay/-/cli-overlay-5.0.8.tgz",
+      "integrity": "sha512-KmtievE/B4kcXp6SuM2gzsnSd8WebkQpg3XaB6GmFh1BJGRqa1UiW9up7L/Q67uOdTigHxr5Ar2lZms4RcDjwQ==",
+      "dev": true
+    },
+    "node_modules/@vue/cli-plugin-babel": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-babel/-/cli-plugin-babel-5.0.8.tgz",
+      "integrity": "sha512-a4qqkml3FAJ3auqB2kN2EMPocb/iu0ykeELwed+9B1c1nQ1HKgslKMHMPavYx3Cd/QAx2mBD4hwKBqZXEI/CsQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.12.16",
+        "@vue/babel-preset-app": "^5.0.8",
+        "@vue/cli-shared-utils": "^5.0.8",
+        "babel-loader": "^8.2.2",
+        "thread-loader": "^3.0.0",
+        "webpack": "^5.54.0"
+      },
+      "peerDependencies": {
+        "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
+      }
+    },
+    "node_modules/@vue/cli-plugin-pwa": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-pwa/-/cli-plugin-pwa-5.0.8.tgz",
+      "integrity": "sha512-MnD9Y6I3nX7c/NawpsJtbXaGFjI9LT5Az7IQjpshS65+yvuOcxV2j/tCjPTrja+zd1VmB4DZUhrfUU2exSBfGg==",
+      "dev": true,
+      "dependencies": {
+        "@vue/cli-shared-utils": "^5.0.8",
+        "html-webpack-plugin": "^5.1.0",
+        "webpack": "^5.54.0",
+        "workbox-webpack-plugin": "^6.1.0"
+      },
+      "peerDependencies": {
+        "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
+      }
+    },
+    "node_modules/@vue/cli-plugin-router": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-router/-/cli-plugin-router-5.0.8.tgz",
+      "integrity": "sha512-Gmv4dsGdAsWPqVijz3Ux2OS2HkMrWi1ENj2cYL75nUeL+Xj5HEstSqdtfZ0b1q9NCce+BFB6QnHfTBXc/fCvMg==",
+      "dev": true,
+      "dependencies": {
+        "@vue/cli-shared-utils": "^5.0.8"
+      },
+      "peerDependencies": {
+        "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
+      }
+    },
+    "node_modules/@vue/cli-plugin-vuex": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
+      "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
+      "dev": true,
+      "peerDependencies": {
+        "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0"
+      }
+    },
+    "node_modules/@vue/cli-service": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-service/-/cli-service-5.0.8.tgz",
+      "integrity": "sha512-nV7tYQLe7YsTtzFrfOMIHc5N2hp5lHG2rpYr0aNja9rNljdgcPZLyQRb2YRivTHqTv7lI962UXFURcpStHgyFw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.12.16",
+        "@soda/friendly-errors-webpack-plugin": "^1.8.0",
+        "@soda/get-current-script": "^1.0.2",
+        "@types/minimist": "^1.2.0",
+        "@vue/cli-overlay": "^5.0.8",
+        "@vue/cli-plugin-router": "^5.0.8",
+        "@vue/cli-plugin-vuex": "^5.0.8",
+        "@vue/cli-shared-utils": "^5.0.8",
+        "@vue/component-compiler-utils": "^3.3.0",
+        "@vue/vue-loader-v15": "npm:vue-loader@^15.9.7",
+        "@vue/web-component-wrapper": "^1.3.0",
+        "acorn": "^8.0.5",
+        "acorn-walk": "^8.0.2",
+        "address": "^1.1.2",
+        "autoprefixer": "^10.2.4",
+        "browserslist": "^4.16.3",
+        "case-sensitive-paths-webpack-plugin": "^2.3.0",
+        "cli-highlight": "^2.1.10",
+        "clipboardy": "^2.3.0",
+        "cliui": "^7.0.4",
+        "copy-webpack-plugin": "^9.0.1",
+        "css-loader": "^6.5.0",
+        "css-minimizer-webpack-plugin": "^3.0.2",
+        "cssnano": "^5.0.0",
+        "debug": "^4.1.1",
+        "default-gateway": "^6.0.3",
+        "dotenv": "^10.0.0",
+        "dotenv-expand": "^5.1.0",
+        "fs-extra": "^9.1.0",
+        "globby": "^11.0.2",
+        "hash-sum": "^2.0.0",
+        "html-webpack-plugin": "^5.1.0",
+        "is-file-esm": "^1.0.0",
+        "launch-editor-middleware": "^2.2.1",
+        "lodash.defaultsdeep": "^4.6.1",
+        "lodash.mapvalues": "^4.6.0",
+        "mini-css-extract-plugin": "^2.5.3",
+        "minimist": "^1.2.5",
+        "module-alias": "^2.2.2",
+        "portfinder": "^1.0.26",
+        "postcss": "^8.2.6",
+        "postcss-loader": "^6.1.1",
+        "progress-webpack-plugin": "^1.0.12",
+        "ssri": "^8.0.1",
+        "terser-webpack-plugin": "^5.1.1",
+        "thread-loader": "^3.0.0",
+        "vue-loader": "^17.0.0",
+        "vue-style-loader": "^4.1.3",
+        "webpack": "^5.54.0",
+        "webpack-bundle-analyzer": "^4.4.0",
+        "webpack-chain": "^6.5.1",
+        "webpack-dev-server": "^4.7.3",
+        "webpack-merge": "^5.7.3",
+        "webpack-virtual-modules": "^0.4.2",
+        "whatwg-fetch": "^3.6.2"
+      },
+      "bin": {
+        "vue-cli-service": "bin/vue-cli-service.js"
+      },
+      "engines": {
+        "node": "^12.0.0 || >= 14.0.0"
+      },
+      "peerDependencies": {
+        "vue-template-compiler": "^2.0.0",
+        "webpack-sources": "*"
+      },
+      "peerDependenciesMeta": {
+        "cache-loader": {
+          "optional": true
+        },
+        "less-loader": {
+          "optional": true
+        },
+        "pug-plain-loader": {
+          "optional": true
+        },
+        "raw-loader": {
+          "optional": true
+        },
+        "sass-loader": {
+          "optional": true
+        },
+        "stylus-loader": {
+          "optional": true
+        },
+        "vue-template-compiler": {
+          "optional": true
+        },
+        "webpack-sources": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/cli-shared-utils": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-shared-utils/-/cli-shared-utils-5.0.8.tgz",
+      "integrity": "sha512-uK2YB7bBVuQhjOJF+O52P9yFMXeJVj7ozqJkwYE9PlMHL1LMHjtCYm4cSdOebuPzyP+/9p0BimM/OqxsevIopQ==",
+      "dev": true,
+      "dependencies": {
+        "@achrinza/node-ipc": "^9.2.5",
+        "chalk": "^4.1.2",
+        "execa": "^1.0.0",
+        "joi": "^17.4.0",
+        "launch-editor": "^2.2.1",
+        "lru-cache": "^6.0.0",
+        "node-fetch": "^2.6.7",
+        "open": "^8.0.2",
+        "ora": "^5.3.0",
+        "read-pkg": "^5.1.1",
+        "semver": "^7.3.4",
+        "strip-ansi": "^6.0.0"
+      }
+    },
+    "node_modules/@vue/cli-shared-utils/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@vue/cli-shared-utils/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@vue/cli-shared-utils/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@vue/cli-shared-utils/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@vue/cli-shared-utils/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@vue/cli-shared-utils/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@vue/cli-shared-utils/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@vue/cli-shared-utils/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@vue/cli-shared-utils/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "2.7.15",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.15.tgz",
+      "integrity": "sha512-FCvIEevPmgCgqFBH7wD+3B97y7u7oj/Wr69zADBf403Tui377bThTjBvekaZvlRr4IwUAu3M6hYZeULZFJbdYg==",
+      "dependencies": {
+        "@babel/parser": "^7.18.4",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/component-compiler-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
+      "integrity": "sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==",
+      "dev": true,
+      "dependencies": {
+        "consolidate": "^0.15.1",
+        "hash-sum": "^1.0.2",
+        "lru-cache": "^4.1.2",
+        "merge-source-map": "^1.1.0",
+        "postcss": "^7.0.36",
+        "postcss-selector-parser": "^6.0.2",
+        "source-map": "~0.6.1",
+        "vue-template-es2015-compiler": "^1.9.0"
+      },
+      "optionalDependencies": {
+        "prettier": "^1.18.2 || ^2.0.0"
+      }
+    },
+    "node_modules/@vue/component-compiler-utils/node_modules/hash-sum": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+      "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+      "dev": true
+    },
+    "node_modules/@vue/component-compiler-utils/node_modules/lru-cache": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-4.1.5.tgz",
+      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+      "dev": true,
+      "dependencies": {
+        "pseudomap": "^1.0.2",
+        "yallist": "^2.1.2"
+      }
+    },
+    "node_modules/@vue/component-compiler-utils/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/@vue/component-compiler-utils/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@vue/component-compiler-utils/node_modules/yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
+      "dev": true
+    },
+    "node_modules/@vue/vue-loader-v15": {
+      "name": "vue-loader",
+      "version": "15.11.1",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.11.1.tgz",
+      "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
+      "dev": true,
+      "dependencies": {
+        "@vue/component-compiler-utils": "^3.1.0",
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.1.0",
+        "vue-hot-reload-api": "^2.3.0",
+        "vue-style-loader": "^4.1.0"
+      },
+      "peerDependencies": {
+        "css-loader": "*",
+        "webpack": "^3.0.0 || ^4.1.0 || ^5.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "cache-loader": {
+          "optional": true
+        },
+        "prettier": {
+          "optional": true
+        },
+        "vue-template-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/vue-loader-v15/node_modules/hash-sum": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+      "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+      "dev": true
+    },
+    "node_modules/@vue/web-component-wrapper": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
+      "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
+      "dev": true
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.11.6.tgz",
+      "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
+      "dev": true
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
+      "dev": true
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
+      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==",
+      "dev": true
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
+      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
+      "dev": true
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
+      "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
+      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
+      "dev": true,
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
+      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
+      "dev": true,
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
+      "dev": true
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
+      "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/helper-wasm-section": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-opt": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6",
+        "@webassemblyjs/wast-printer": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
+      "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
+      "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
+      "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
+      "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
+      "dev": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmmirror.com/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dev": true,
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.11.2",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.11.2.tgz",
+      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-import-assertions": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmmirror.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
+      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^8"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmmirror.com/acorn-walk/-/acorn-walk-8.3.0.tgz",
+      "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/address": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/address/-/address-1.2.2.tgz",
+      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/amfe-flexible": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
+      "integrity": "sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw=="
+    },
+    "node_modules/ansi-escapes": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+      "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/ansi-html-community": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmmirror.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
+      "dev": true,
+      "engines": [
+        "node >= 0.8.0"
+      ],
+      "bin": {
+        "ansi-html": "bin/ansi-html"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arch": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/arch/-/arch-2.2.0.tgz",
+      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
+      "dev": true
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
+      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "is-array-buffer": "^3.0.1"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/array-flatten/-/array-flatten-2.1.2.tgz",
+      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
+      "dev": true
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz",
+      "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==",
+      "dev": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
+        "is-array-buffer": "^3.0.2",
+        "is-shared-array-buffer": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/async": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmmirror.com/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.14"
+      }
+    },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.16",
+      "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.16.tgz",
+      "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
+      "dependencies": {
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001538",
+        "fraction.js": "^4.3.6",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/babel-loader": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
+      "integrity": "sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==",
+      "dev": true,
+      "dependencies": {
+        "find-cache-dir": "^3.3.1",
+        "loader-utils": "^2.0.0",
+        "make-dir": "^3.1.0",
+        "schema-utils": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 8.9"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "webpack": ">=2"
+      }
+    },
+    "node_modules/babel-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "dev": true,
+      "dependencies": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.6.tgz",
+      "integrity": "sha512-jhHiWVZIlnPbEUKSSNb9YoWcQGdlTLq7z1GHL4AjFxaoOUMuuEVJ+Y4pAaQUGOGk93YsVCKPbqbfw3m0SM6H8Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.22.6",
+        "@babel/helper-define-polyfill-provider": "^0.4.3",
+        "semver": "^6.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.8.6",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.6.tgz",
+      "integrity": "sha512-leDIc4l4tUgU7str5BWLS2h8q2N4Nf6lGZP6UrNDxdtfF2g69eJ5L0H7S8A5Ln/arfFAfHor5InAdZuIOwZdgQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.4.3",
+        "core-js-compat": "^3.33.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.3.tgz",
+      "integrity": "sha512-8sHeDOmXC8csczMrYEOf0UTNa4yE2SxV5JGeT/LP1n0OYVDUUFPxG9vdk2AlDlIit4t+Kf0xCtpgXPBwnn/9pw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.4.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true
+    },
+    "node_modules/batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
+      "dev": true
+    },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmmirror.com/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "dev": true,
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/body-parser/node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/body-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/body-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/bonjour-service": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/bonjour-service/-/bonjour-service-1.1.1.tgz",
+      "integrity": "sha512-Z/5lQRMOG9k7W+FkeGTNjh7htqn/2LMnfOvBZ8pynNZCM9MwkQkI3zeI4oz09uWdcgmgHugVvBqxGg4VQJ5PCg==",
+      "dev": true,
+      "dependencies": {
+        "array-flatten": "^2.1.2",
+        "dns-equal": "^1.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "multicast-dns": "^7.2.5"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.22.1.tgz",
+      "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001541",
+        "electron-to-chromium": "^1.4.535",
+        "node-releases": "^2.0.13",
+        "update-browserslist-db": "^1.0.13"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmmirror.com/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
+    "node_modules/builtin-modules": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/builtin-modules/-/builtin-modules-3.3.0.tgz",
+      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.5.tgz",
+      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.1",
+        "set-function-length": "^1.1.1"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dev": true,
+      "dependencies": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001565",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz",
+      "integrity": "sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w=="
+    },
+    "node_modules/case-sensitive-paths-webpack-plugin": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
+      "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
+    "node_modules/clean-css": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmmirror.com/clean-css/-/clean-css-5.3.2.tgz",
+      "integrity": "sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==",
+      "dev": true,
+      "dependencies": {
+        "source-map": "~0.6.0"
+      },
+      "engines": {
+        "node": ">= 10.0"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-highlight": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmmirror.com/cli-highlight/-/cli-highlight-2.1.11.tgz",
+      "integrity": "sha512-9KDcoEVwyUXrjcJNvHD0NFc/hiwe/WPVYIleQh2O1N2Zro5gWJZ/K+3DGn8w8P/F6FxOgzyC5bxDyHIgCSPhGg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "highlight.js": "^10.7.1",
+        "mz": "^2.4.0",
+        "parse5": "^5.1.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.0",
+        "yargs": "^16.0.0"
+      },
+      "bin": {
+        "highlight": "bin/highlight"
+      },
+      "engines": {
+        "node": ">=8.0.0",
+        "npm": ">=5.0.0"
+      }
+    },
+    "node_modules/cli-highlight/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-highlight/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cli-highlight/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/cli-highlight/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/cli-highlight/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-highlight/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmmirror.com/cli-spinners/-/cli-spinners-2.9.2.tgz",
+      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/clipboardy": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/clipboardy/-/clipboardy-2.3.0.tgz",
+      "integrity": "sha512-mKhiIL2DrQIsuXMgBgnfEHOZOryC7kY7YO//TN6c63wlEm3NG5tz+YgY5rVi29KCmq/QQjKYvM7a19+MDOTHOQ==",
+      "dev": true,
+      "dependencies": {
+        "arch": "^2.1.1",
+        "execa": "^1.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmmirror.com/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/clone-deep/node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmmirror.com/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true
+    },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmmirror.com/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true
+    },
+    "node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/common-tags": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmmirror.com/common-tags/-/common-tags-1.8.2.tgz",
+      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "dev": true
+    },
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmmirror.com/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "dev": true,
+      "dependencies": {
+        "mime-db": ">= 1.43.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmmirror.com/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "dev": true,
+      "dependencies": {
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/compression/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/compression/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/compression/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "node_modules/connect-history-api-fallback": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
+      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/consolidate": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmmirror.com/consolidate/-/consolidate-0.15.1.tgz",
+      "integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==",
+      "deprecated": "Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog",
+      "dev": true,
+      "dependencies": {
+        "bluebird": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmmirror.com/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true
+    },
+    "node_modules/cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmmirror.com/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "dev": true
+    },
+    "node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "dependencies": {
+        "is-what": "^3.14.1"
+      }
+    },
+    "node_modules/copy-webpack-plugin": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmmirror.com/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz",
+      "integrity": "sha512-rxnR7PaGigJzhqETHGmAcxKnLZSR5u1Y3/bcIv/1FnqXedcL/E2ewK7ZCNrArJKCiSv8yVXhTqetJh8inDvfsA==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.7",
+        "glob-parent": "^6.0.1",
+        "globby": "^11.0.3",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^3.1.1",
+        "serialize-javascript": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/copy-webpack-plugin/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/core-js": {
+      "version": "3.33.3",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.33.3.tgz",
+      "integrity": "sha512-lo0kOocUlLKmm6kv/FswQL8zbkH7mVsLJ/FULClOhv8WRVmKLVcs6XPNQAzstfeJTCHMyButEwG+z1kHxHoDZw==",
+      "hasInstallScript": true
+    },
+    "node_modules/core-js-compat": {
+      "version": "3.33.3",
+      "resolved": "https://registry.npmmirror.com/core-js-compat/-/core-js-compat-3.33.3.tgz",
+      "integrity": "sha512-cNzGqFsh3Ot+529GIXacjTJ7kegdt5fPXxCBVS1G0iaZpuo/tBz399ymceLJveQhFFZ8qThHiP3fzuoQjKN2ow==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.22.1"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dev": true,
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-6.0.5.tgz",
+      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "dev": true,
+      "dependencies": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      },
+      "engines": {
+        "node": ">=4.8"
+      }
+    },
+    "node_modules/cross-spawn/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/css-blank-pseudo": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-6.0.0.tgz",
+      "integrity": "sha512-VbfLlOWO7sBHBTn6pwDQzc07Z0SDydgDBfNfCE0nvrehdBNv9RKsuupIRa/qal0+fBZhAALyQDPMKz5lnvcchw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/css-declaration-sorter": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
+      "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/css-has-pseudo": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-6.0.0.tgz",
+      "integrity": "sha512-X+r+JBuoO37FBOWVNhVJhxtSBUFHgHbrcc0CjFT28JEdOw1qaDwABv/uunyodUuSy2hMPe9j/HjssxSlvUmKjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/selector-specificity": "^3.0.0",
+        "postcss-selector-parser": "^6.0.13",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/css-loader": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.8.1.tgz",
+      "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.21",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.3",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.8"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/css-loader/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/css-loader/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/css-loader/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "node_modules/css-minimizer-webpack-plugin": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmmirror.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz",
+      "integrity": "sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==",
+      "dev": true,
+      "dependencies": {
+        "cssnano": "^5.0.6",
+        "jest-worker": "^27.0.2",
+        "postcss": "^8.3.5",
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@parcel/css": {
+          "optional": true
+        },
+        "clean-css": {
+          "optional": true
+        },
+        "csso": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/css-prefers-color-scheme": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-9.0.0.tgz",
+      "integrity": "sha512-03QGAk/FXIRseDdLb7XAiu6gidQ0Nd8945xuM7VFVPpc6goJsG9uIO8xQjTxwbPdPIIV4o4AJoOJyt8gwDl67g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cssdb": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.9.0.tgz",
+      "integrity": "sha512-WPMT9seTQq6fPAa1yN4zjgZZeoTriSN2LqW9C+otjar12DQIWA4LuSfFrvFJiKp4oD0xIk1vumDLw8K9ur4NBw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        }
+      ]
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssnano": {
+      "version": "5.1.15",
+      "resolved": "https://registry.npmmirror.com/cssnano/-/cssnano-5.1.15.tgz",
+      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
+      "dev": true,
+      "dependencies": {
+        "cssnano-preset-default": "^5.2.14",
+        "lilconfig": "^2.0.3",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-preset-default": {
+      "version": "5.2.14",
+      "resolved": "https://registry.npmmirror.com/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
+      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
+      "dev": true,
+      "dependencies": {
+        "css-declaration-sorter": "^6.3.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-calc": "^8.2.3",
+        "postcss-colormin": "^5.3.1",
+        "postcss-convert-values": "^5.1.3",
+        "postcss-discard-comments": "^5.1.2",
+        "postcss-discard-duplicates": "^5.1.0",
+        "postcss-discard-empty": "^5.1.1",
+        "postcss-discard-overridden": "^5.1.0",
+        "postcss-merge-longhand": "^5.1.7",
+        "postcss-merge-rules": "^5.1.4",
+        "postcss-minify-font-values": "^5.1.0",
+        "postcss-minify-gradients": "^5.1.1",
+        "postcss-minify-params": "^5.1.4",
+        "postcss-minify-selectors": "^5.2.1",
+        "postcss-normalize-charset": "^5.1.0",
+        "postcss-normalize-display-values": "^5.1.0",
+        "postcss-normalize-positions": "^5.1.1",
+        "postcss-normalize-repeat-style": "^5.1.1",
+        "postcss-normalize-string": "^5.1.0",
+        "postcss-normalize-timing-functions": "^5.1.0",
+        "postcss-normalize-unicode": "^5.1.1",
+        "postcss-normalize-url": "^5.1.0",
+        "postcss-normalize-whitespace": "^5.1.1",
+        "postcss-ordered-values": "^5.1.3",
+        "postcss-reduce-initial": "^5.1.2",
+        "postcss-reduce-transforms": "^5.1.0",
+        "postcss-svgo": "^5.1.0",
+        "postcss-unique-selectors": "^5.1.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dev": true,
+      "dependencies": {
+        "css-tree": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true
+    },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
+      "dev": true
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/default-gateway": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/default-gateway/-/default-gateway-6.0.3.tgz",
+      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+      "dev": true,
+      "dependencies": {
+        "execa": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/default-gateway/node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/default-gateway/node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/default-gateway/node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/default-gateway/node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/default-gateway/node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/default-gateway/node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/default-gateway/node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/default-gateway/node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/default-gateway/node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dev": true,
+      "dependencies": {
+        "clone": "^1.0.2"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.1.tgz",
+      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "dev": true
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dns-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/dns-equal/-/dns-equal-1.0.0.tgz",
+      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==",
+      "dev": true
+    },
+    "node_modules/dns-packet": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmmirror.com/dns-packet/-/dns-packet-5.6.1.tgz",
+      "integrity": "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==",
+      "dev": true,
+      "dependencies": {
+        "@leichtgewicht/ip-codec": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/dom-converter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+      "dev": true,
+      "dependencies": {
+        "utila": "~0.4"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true
+    },
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmmirror.com/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmmirror.com/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      }
+    },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmmirror.com/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/dotenv-expand": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
+      "dev": true
+    },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
+    },
+    "node_modules/easy-stack": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/easy-stack/-/easy-stack-1.0.1.tgz",
+      "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/echarts": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
+      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.4"
+      }
+    },
+    "node_modules/echarts-gl": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
+      "dependencies": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
+      },
+      "peerDependencies": {
+        "echarts": "^5.1.2"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "dev": true
+    },
+    "node_modules/ejs": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmmirror.com/ejs/-/ejs-3.1.9.tgz",
+      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
+      "dev": true,
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.595",
+      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.595.tgz",
+      "integrity": "sha512-+ozvXuamBhDOKvMNUQvecxfbyICmIAwS4GpLmR0bsiSBlGnLaOcs2Cj7J8XSbW+YEaN3Xl3ffgpm+srTUWFwFQ=="
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmmirror.com/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
+      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true
+    },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmmirror.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "dev": true,
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.22.3",
+      "resolved": "https://registry.npmmirror.com/es-abstract/-/es-abstract-1.22.3.tgz",
+      "integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==",
+      "dev": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "arraybuffer.prototype.slice": "^1.0.2",
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.5",
+        "es-set-tostringtag": "^2.0.1",
+        "es-to-primitive": "^1.2.1",
+        "function.prototype.name": "^1.1.6",
+        "get-intrinsic": "^1.2.2",
+        "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0",
+        "internal-slot": "^1.0.5",
+        "is-array-buffer": "^3.0.2",
+        "is-callable": "^1.2.7",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.12",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.13.1",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.5.1",
+        "safe-array-concat": "^1.0.1",
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trim": "^1.2.8",
+        "string.prototype.trimend": "^1.0.7",
+        "string.prototype.trimstart": "^1.0.7",
+        "typed-array-buffer": "^1.0.0",
+        "typed-array-byte-length": "^1.0.0",
+        "typed-array-byte-offset": "^1.0.0",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+      "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
+      "dev": true
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
+      "integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.2",
+        "has-tostringtag": "^1.0.0",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "dev": true
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+      "dev": true
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/event-pubsub": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/event-pubsub/-/event-pubsub-4.3.0.tgz",
+      "integrity": "sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/execa": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/execa/-/execa-1.0.0.tgz",
+      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^6.0.0",
+        "get-stream": "^4.0.0",
+        "is-stream": "^1.1.0",
+        "npm-run-path": "^2.0.0",
+        "p-finally": "^1.0.0",
+        "signal-exit": "^3.0.0",
+        "strip-eof": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.18.2",
+      "resolved": "https://registry.npmmirror.com/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "dev": true,
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.1",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.5.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.2.0",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.11.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/express/node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+      "dev": true
+    },
+    "node_modules/express/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/express/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "node_modules/fastq": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmmirror.com/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "dev": true,
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/figures": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/figures/-/figures-2.0.0.tgz",
+      "integrity": "sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "dev": true,
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dev": true,
+      "dependencies": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true,
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmmirror.com/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmmirror.com/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fs-monkey": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/fs-monkey/-/fs-monkey-1.0.5.tgz",
+      "integrity": "sha512-8uMbBjrhzW76TYgEV27Y5E//W2f/lTFmx78P2w19FZSxarhI/798APGQyuGCwmkNxgwGRhrLfvWyLBvNtuOmew==",
+      "dev": true
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmmirror.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
+      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "functions-have-names": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
+      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      }
+    },
+    "node_modules/get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true
+    },
+    "node_modules/get-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-4.1.0.tgz",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "dev": true,
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true
+    },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmmirror.com/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true
+    },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/handle-thing": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/handle-thing/-/handle-thing-2.0.1.tgz",
+      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
+      "dev": true
+    },
+    "node_modules/has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true
+    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
+      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.2"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hash-sum": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz",
+      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
+      "dev": true
+    },
+    "node_modules/hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+      "dev": true
+    },
+    "node_modules/hpack.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmmirror.com/hpack.js/-/hpack.js-2.1.6.tgz",
+      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "obuf": "^1.0.0",
+        "readable-stream": "^2.0.1",
+        "wbuf": "^1.1.0"
+      }
+    },
+    "node_modules/hpack.js/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "dev": true
+    },
+    "node_modules/hpack.js/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dev": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/hpack.js/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "node_modules/hpack.js/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/html-entities": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/html-entities/-/html-entities-2.4.0.tgz",
+      "integrity": "sha512-igBTJcNNNhvZFRtm8uA6xMY6xYleeDwn3PeBCkDz7tHttv4F2hsDI2aPgNERWzvRcNYHNT3ymRaQzllmXj4YsQ==",
+      "dev": true
+    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true
+    },
+    "node_modules/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
+      "dev": true,
+      "dependencies": {
+        "camel-case": "^4.1.2",
+        "clean-css": "^5.2.2",
+        "commander": "^8.3.0",
+        "he": "^1.2.0",
+        "param-case": "^3.0.4",
+        "relateurl": "^0.2.7",
+        "terser": "^5.10.0"
+      },
+      "bin": {
+        "html-minifier-terser": "cli.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/html-webpack-plugin": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmmirror.com/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz",
+      "integrity": "sha512-6YrDKTuqaP/TquFH7h4srYWsZx+x6k6+FbsTm0ziCwGHDP78Unr1r9F/H4+sGmMbX08GQcJ+K64x55b+7VM/jg==",
+      "dev": true,
+      "dependencies": {
+        "@types/html-minifier-terser": "^6.0.0",
+        "html-minifier-terser": "^6.0.2",
+        "lodash": "^4.17.21",
+        "pretty-error": "^4.0.0",
+        "tapable": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "^5.20.0"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/http-deceiver": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmmirror.com/http-deceiver/-/http-deceiver-1.2.7.tgz",
+      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
+      "dev": true
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dev": true,
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmmirror.com/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==",
+      "dev": true
+    },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmmirror.com/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-proxy-middleware": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
+      "dev": true,
+      "dependencies": {
+        "@types/http-proxy": "^1.17.8",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@types/express": "^4.17.13"
+      },
+      "peerDependenciesMeta": {
+        "@types/express": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "dev": true
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true
+    },
+    "node_modules/ignore": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/ignore/-/ignore-5.3.0.tgz",
+      "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "node_modules/internal-slot": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/internal-slot/-/internal-slot-1.0.6.tgz",
+      "integrity": "sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.2",
+        "hasown": "^2.0.0",
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
+      "integrity": "sha512-LlbxQ7xKzfBusov6UMi4MFpEg0m+mAm9xyNGEduwXMEDuf4WfzB/RZwMVYEd7IKGvh4IUkEXYxtAVu9T3OelJQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
+    },
+    "node_modules/is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "dependencies": {
+        "has-bigints": "^1.0.1"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "dev": true,
+      "dependencies": {
+        "hasown": "^2.0.0"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-file-esm": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/is-file-esm/-/is-file-esm-1.0.0.tgz",
+      "integrity": "sha512-rZlaNKb4Mr8WlRu2A9XdeoKgnO5aA53XdPHgCKVyCrQ/rWi89RET1+bq37Ru46obaQXeiX4vmFIm1vks41hoSA==",
+      "dev": true,
+      "dependencies": {
+        "read-pkg-up": "^7.0.1"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+      "dev": true
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmmirror.com/is-typed-array/-/is-typed-array-1.1.12.tgz",
+      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "dev": true,
+      "dependencies": {
+        "which-typed-array": "^1.1.11"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmmirror.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jake": {
+      "version": "10.8.7",
+      "resolved": "https://registry.npmmirror.com/jake/-/jake-10.8.7.tgz",
+      "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
+      "dev": true,
+      "dependencies": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.4",
+        "minimatch": "^3.1.2"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jake/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jake/node_modules/async": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmmirror.com/async/-/async-3.2.5.tgz",
+      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
+      "dev": true
+    },
+    "node_modules/jake/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jake/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jake/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/jake/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jake/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/javascript-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
+      "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
+      "dev": true
+    },
+    "node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmmirror.com/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/jest-worker/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/joi": {
+      "version": "17.11.0",
+      "resolved": "https://registry.npmmirror.com/joi/-/joi-17.11.0.tgz",
+      "integrity": "sha512-NgB+lZLNoqISVy1rZocE9PZI36bL/77ie924Ri43yEvi9GUUMPeyVIr8KdFTMUlby1p0PBYMk9spIxEUQYqrJQ==",
+      "dev": true,
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0",
+        "@hapi/topo": "^5.0.0",
+        "@sideway/address": "^4.1.3",
+        "@sideway/formula": "^3.0.1",
+        "@sideway/pinpoint": "^2.0.0"
+      }
+    },
+    "node_modules/js-message": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
+      "integrity": "sha512-efJLHhLjIyKRewNS9EGZ4UpI8NguuL6fKkhRxVuMmrGV2xN/0APGdQYwLFky5w9naebSZ0OwAGp0G6/2Cg90rA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "dev": true
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsonpointer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/jsonpointer/-/jsonpointer-5.0.1.tgz",
+      "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/launch-editor": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmmirror.com/launch-editor/-/launch-editor-2.6.1.tgz",
+      "integrity": "sha512-eB/uXmFVpY4zezmGp5XtU21kwo7GBbKB+EQ+UZeWtGb9yAM5xt/Evk+lYH3eRNAtId+ej4u7TYPFZ07w4s7rRw==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "shell-quote": "^1.8.1"
+      }
+    },
+    "node_modules/launch-editor-middleware": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmmirror.com/launch-editor-middleware/-/launch-editor-middleware-2.6.1.tgz",
+      "integrity": "sha512-Fg/xYhf7ARmRp40n18wIfJyuAMEjXo67Yull7uF7d0OJ3qA4EYJISt1XfPPn69IIJ5jKgQwzcg6DqHYo95LL/g==",
+      "dev": true,
+      "dependencies": {
+        "launch-editor": "^2.6.1"
+      }
+    },
+    "node_modules/less": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/less/-/less-4.2.0.tgz",
+      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
+      "dev": true,
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/less-loader": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-8.1.1.tgz",
+      "integrity": "sha512-K93jJU7fi3n6rxVvzp8Cb88Uy9tcQKfHlkoezHwKILXhlNYiRQl4yowLIkQqmBXOH/5I8yoKiYeIf781HGkW9g==",
+      "dev": true,
+      "dependencies": {
+        "klona": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "peerDependencies": {
+        "less": "^3.5.0 || ^4.0.0",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/less/node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/less/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lib-flexible": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/lib-flexible/-/lib-flexible-0.3.2.tgz",
+      "integrity": "sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg=="
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
+    "node_modules/loader-runner": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.11.5"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/loader-utils/node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true
+    },
+    "node_modules/lodash.defaultsdeep": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmmirror.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz",
+      "integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==",
+      "dev": true
+    },
+    "node_modules/lodash.kebabcase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
+      "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==",
+      "dev": true
+    },
+    "node_modules/lodash.mapvalues": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmmirror.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
+      "integrity": "sha512-JPFqXFeZQ7BfS00H58kClY7SPVeHertPE0lNuCyZ26/XlN8TvakYD7b9bGyNmXbT/D3BbtPAAmq90gPWqLkxlQ==",
+      "dev": true
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "dev": true
+    },
+    "node_modules/lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmmirror.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
+      "dev": true
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "dev": true
+    },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/log-symbols/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/log-symbols/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/log-symbols/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/log-symbols/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/log-symbols/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/log-symbols/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/log-update": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/log-update/-/log-update-2.3.0.tgz",
+      "integrity": "sha512-vlP11XfFGyeNQlmEn9tJ66rEW1coA/79m5z6BCkudjbAGE83uhAcGYrBFwfs3AdLiLzGRusRPAbSPK9xZteCmg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^3.0.0",
+        "cli-cursor": "^2.0.0",
+        "wrap-ansi": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-regex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-3.0.1.tgz",
+      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-update/node_modules/cli-cursor": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/cli-cursor/-/cli-cursor-2.1.0.tgz",
+      "integrity": "sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==",
+      "dev": true,
+      "dependencies": {
+        "restore-cursor": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-update/node_modules/is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-update/node_modules/mimic-fn": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-1.2.0.tgz",
+      "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-update/node_modules/onetime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/onetime/-/onetime-2.0.1.tgz",
+      "integrity": "sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-update/node_modules/restore-cursor": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/restore-cursor/-/restore-cursor-2.0.0.tgz",
+      "integrity": "sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==",
+      "dev": true,
+      "dependencies": {
+        "onetime": "^2.0.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-update/node_modules/string-width": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-2.1.1.tgz",
+      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+      "dev": true,
+      "dependencies": {
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-update/node_modules/strip-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-4.0.0.tgz",
+      "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz",
+      "integrity": "sha512-iXR3tDXpbnTpzjKSylUJRkLuOrEC7hwEB221cgn6wtF8wpmz28puFXAEfPT5zrjM3wahygB//VuWEr1vTkDcNQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^2.1.1",
+        "strip-ansi": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "dev": true
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/memfs": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmmirror.com/memfs/-/memfs-3.5.3.tgz",
+      "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
+      "dev": true,
+      "dependencies": {
+        "fs-monkey": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
+      "dev": true
+    },
+    "node_modules/merge-source-map": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/merge-source-map/-/merge-source-map-1.1.0.tgz",
+      "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
+      "dev": true,
+      "dependencies": {
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mini-css-extract-plugin": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmmirror.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
+      "integrity": "sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==",
+      "dev": true,
+      "dependencies": {
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "dev": true
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmmirror.com/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true
+    },
+    "node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/module-alias": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/module-alias/-/module-alias-2.2.3.tgz",
+      "integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
+      "dev": true
+    },
+    "node_modules/mrmime": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz",
+      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/multicast-dns": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmmirror.com/multicast-dns/-/multicast-dns-7.2.5.tgz",
+      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
+      "dev": true,
+      "dependencies": {
+        "dns-packet": "^5.2.2",
+        "thunky": "^1.0.2"
+      },
+      "bin": {
+        "multicast-dns": "cli.js"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/needle": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/needle/-/needle-3.2.0.tgz",
+      "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
+    "node_modules/needle/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/needle/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmmirror.com/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
+    },
+    "node_modules/nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dev": true,
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-forge": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6.13.0"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.13.tgz",
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
+    },
+    "node_modules/normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "node_modules/normalize-package-data/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-url": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/normalize-url/-/normalize-url-6.1.0.tgz",
+      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "dev": true
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmmirror.com/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/obuf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
+      "dev": true
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dev": true,
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmmirror.com/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "dev": true,
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmmirror.com/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
+    "node_modules/ora": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmmirror.com/ora/-/ora-5.4.1.tgz",
+      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "dev": true,
+      "dependencies": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ora/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ora/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ora/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/ora/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/ora/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ora/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-retry": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmmirror.com/p-retry/-/p-retry-4.6.2.tgz",
+      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/retry": "0.12.0",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "dev": true,
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "dev": true
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "dev": true,
+      "dependencies": {
+        "parse5": "^6.0.1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter/node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+      "dev": true
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmmirror.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
+      "dev": true
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/portfinder": {
+      "version": "1.0.32",
+      "resolved": "https://registry.npmmirror.com/portfinder/-/portfinder-1.0.32.tgz",
+      "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
+      "dev": true,
+      "dependencies": {
+        "async": "^2.6.4",
+        "debug": "^3.2.7",
+        "mkdirp": "^0.5.6"
+      },
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/portfinder/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-attribute-case-insensitive": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-6.0.2.tgz",
+      "integrity": "sha512-IRuCwwAAQbgaLhxQdQcIIK0dCVXg3XDUnzgKD8iwdiYdwU4rMWRWyl/W9/0nA4ihVpq5pyALiHB2veBJ0292pw==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-calc": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmmirror.com/postcss-calc/-/postcss-calc-8.2.4.tgz",
+      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.9",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.2"
+      }
+    },
+    "node_modules/postcss-clamp": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-clamp/-/postcss-clamp-4.1.0.tgz",
+      "integrity": "sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=7.6.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.6"
+      }
+    },
+    "node_modules/postcss-color-functional-notation": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-6.0.2.tgz",
+      "integrity": "sha512-FsjSmlSufuiFBsIqQ++VxFmvX7zKndZpBkHmfXr4wqhvzM92FTEkAh703iqWTl1U3faTgqioIqCbfqdWiFVwtw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-color-hex-alpha": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-9.0.2.tgz",
+      "integrity": "sha512-SfPjgr//VQ/DOCf80STIAsdAs7sbIbxATvVmd+Ec7JvR8onz9pjawhq3BJM3Pie40EE3TyB0P6hft16D33Nlyg==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-color-rebeccapurple": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-9.0.1.tgz",
+      "integrity": "sha512-ds4cq5BjRieizVb2PnvbJ0omg9VCo2/KzluvoFZbxuGpsGJ5BQSD93CHBooinEtangCM5YqUOerGDl4xGmOb6Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-colormin": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
+      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-convert-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmmirror.com/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-custom-media": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-10.0.2.tgz",
+      "integrity": "sha512-zcEFNRmDm2fZvTPdI1pIW3W//UruMcLosmMiCdpQnrCsTRzWlKQPYMa1ud9auL0BmrryKK1+JjIGn19K0UjO/w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/cascade-layer-name-parser": "^1.0.5",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/media-query-list-parser": "^2.1.5"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-custom-properties": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.3.2.tgz",
+      "integrity": "sha512-2Coszybpo8lpLY24vy2CYv9AasiZ39/bs8Imv0pWMq55Gl8NWzfc24OAo3zIX7rc6uUJAqESnVOMZ6V6lpMjJA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/cascade-layer-name-parser": "^1.0.5",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-custom-selectors": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.6.tgz",
+      "integrity": "sha512-svsjWRaxqL3vAzv71dV0/65P24/FB8TbPX+lWyyf9SZ7aZm4S4NhCn7N3Bg+Z5sZunG3FS8xQ80LrCU9hb37cw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/cascade-layer-name-parser": "^1.0.5",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-dir-pseudo-class": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-8.0.0.tgz",
+      "integrity": "sha512-Oy5BBi0dWPwij/IA+yDYj+/OBMQ9EPqAzTHeSNUYrUWdll/PRJmcbiUj0MNcsBi681I1gcSTLvMERPaXzdbvJg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-discard-comments": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-duplicates": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-empty": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-overridden": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-double-position-gradients": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-5.0.2.tgz",
+      "integrity": "sha512-KTbvdOOy8z8zb0BTkEg4/1vqlRlApdvjw8/pFoehgQl0WVO+fezDGlvo0B8xRA+XccA7ohkQCULKNsiNOx70Cw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-focus-visible": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-9.0.0.tgz",
+      "integrity": "sha512-zA4TbVaIaT8npZBEROhZmlc+GBKE8AELPHXE7i4TmIUEQhw/P/mSJfY9t6tBzpQ1rABeGtEOHYrW4SboQeONMQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-focus-within": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-8.0.0.tgz",
+      "integrity": "sha512-E7+J9nuQzZaA37D/MUZMX1K817RZGDab8qw6pFwzAkDd/QtlWJ9/WTKmzewNiuxzeq6WWY7ATiRePVoDKp+DnA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-font-variant": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
+      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-gap-properties": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-5.0.0.tgz",
+      "integrity": "sha512-YjsEEL6890P7MCv6fch6Am1yq0EhQCJMXyT4LBohiu87+4/WqR7y5W3RIv53WdA901hhytgRvjlrAhibhW4qsA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-image-set-function": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-6.0.1.tgz",
+      "integrity": "sha512-VlZncC9hhZ5tg0JllY4g6Z28BeoPO8DIkelioEEkXL0AA0IORlqYpTi2L8TUnl4YQrlwvBgxVy+mdZJw5R/cIQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-lab-function": {
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-6.0.7.tgz",
+      "integrity": "sha512-4d1lhDVPukHFqkMv4G5vVcK+tgY52vwb5uR1SWKOaO5389r2q8fMxBWuXSW+YtbCOEGP0/X9KERi9E9le2pJuw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-loader": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmmirror.com/postcss-loader/-/postcss-loader-6.2.1.tgz",
+      "integrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==",
+      "dev": true,
+      "dependencies": {
+        "cosmiconfig": "^7.0.0",
+        "klona": "^2.0.5",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "peerDependencies": {
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/postcss-loader/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/postcss-loader/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/postcss-loader/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "node_modules/postcss-logical": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-7.0.0.tgz",
+      "integrity": "sha512-zYf3vHkoW82f5UZTEXChTJvH49Yl9X37axTZsJGxrCG2kOUwtaAoz9E7tqYg0lsIoJLybaL8fk/2mOi81zVIUw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-merge-longhand": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmmirror.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^5.1.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-merge-rules": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmmirror.com/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
+      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^3.1.0",
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-font-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
+      "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-gradients": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
+      "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
+      "dev": true,
+      "dependencies": {
+        "colord": "^2.9.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-params": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmmirror.com/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-selectors": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
+      "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+      "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-nesting": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.0.1.tgz",
+      "integrity": "sha512-6LCqCWP9pqwXw/njMvNK0hGY44Fxc4B2EsGbn6xDcxbNRzP8GYoxT7yabVVMLrX3quqOJ9hg2jYMsnkedOf8pA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/selector-specificity": "^3.0.0",
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-normalize-charset": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-display-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
+      "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-positions": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
+      "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
+      "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-string": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
+      "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
+      "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-unicode": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
+      "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
+      "dev": true,
+      "dependencies": {
+        "normalize-url": "^6.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
+      "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-opacity-percentage": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-2.0.0.tgz",
+      "integrity": "sha512-lyDrCOtntq5Y1JZpBFzIWm2wG9kbEdujpNt4NLannF+J9c8CgFIzPa80YQfdza+Y+yFfzbYj/rfoOsYsooUWTQ==",
+      "funding": [
+        {
+          "type": "kofi",
+          "url": "https://ko-fi.com/mrcgrtz"
+        },
+        {
+          "type": "liberapay",
+          "url": "https://liberapay.com/mrcgrtz"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2"
+      }
+    },
+    "node_modules/postcss-ordered-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmmirror.com/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
+      "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
+      "dev": true,
+      "dependencies": {
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-overflow-shorthand": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-5.0.0.tgz",
+      "integrity": "sha512-2rlxDyeSics/hC2FuMdPnWiP9WUPZ5x7FTuArXLFVpaSQ2woPSfZS4RD59HuEokbZhs/wPUQJ1E3MT6zVv94MQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-page-break": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
+      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
+      "peerDependencies": {
+        "postcss": "^8"
+      }
+    },
+    "node_modules/postcss-place": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-9.0.0.tgz",
+      "integrity": "sha512-qLEPD9VPH5opDVemwmRaujODF9nExn24VOC3ghgVLEvfYN7VZLwJHes0q/C9YR5hI2UC3VgBE8Wkdp1TxCXhtg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-preset-env": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.3.0.tgz",
+      "integrity": "sha512-ycw6doPrqV6QxDCtgiyGDef61bEfiSc59HGM4gOw/wxQxmKnhuEery61oOC/5ViENz/ycpRsuhTexs1kUBTvVw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/postcss-cascade-layers": "^4.0.1",
+        "@csstools/postcss-color-function": "^3.0.7",
+        "@csstools/postcss-color-mix-function": "^2.0.7",
+        "@csstools/postcss-exponential-functions": "^1.0.1",
+        "@csstools/postcss-font-format-keywords": "^3.0.0",
+        "@csstools/postcss-gamut-mapping": "^1.0.0",
+        "@csstools/postcss-gradients-interpolation-method": "^4.0.7",
+        "@csstools/postcss-hwb-function": "^3.0.6",
+        "@csstools/postcss-ic-unit": "^3.0.2",
+        "@csstools/postcss-initial": "^1.0.0",
+        "@csstools/postcss-is-pseudo-class": "^4.0.3",
+        "@csstools/postcss-logical-float-and-clear": "^2.0.0",
+        "@csstools/postcss-logical-overflow": "^1.0.0",
+        "@csstools/postcss-logical-overscroll-behavior": "^1.0.0",
+        "@csstools/postcss-logical-resize": "^2.0.0",
+        "@csstools/postcss-logical-viewport-units": "^2.0.3",
+        "@csstools/postcss-media-minmax": "^1.1.0",
+        "@csstools/postcss-media-queries-aspect-ratio-number-values": "^2.0.3",
+        "@csstools/postcss-nested-calc": "^3.0.0",
+        "@csstools/postcss-normalize-display-values": "^3.0.1",
+        "@csstools/postcss-oklab-function": "^3.0.7",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2",
+        "@csstools/postcss-relative-color-syntax": "^2.0.7",
+        "@csstools/postcss-scope-pseudo-class": "^3.0.0",
+        "@csstools/postcss-stepped-value-functions": "^3.0.2",
+        "@csstools/postcss-text-decoration-shorthand": "^3.0.3",
+        "@csstools/postcss-trigonometric-functions": "^3.0.2",
+        "@csstools/postcss-unset-value": "^3.0.0",
+        "autoprefixer": "^10.4.16",
+        "browserslist": "^4.22.1",
+        "css-blank-pseudo": "^6.0.0",
+        "css-has-pseudo": "^6.0.0",
+        "css-prefers-color-scheme": "^9.0.0",
+        "cssdb": "^7.9.0",
+        "postcss-attribute-case-insensitive": "^6.0.2",
+        "postcss-clamp": "^4.1.0",
+        "postcss-color-functional-notation": "^6.0.2",
+        "postcss-color-hex-alpha": "^9.0.2",
+        "postcss-color-rebeccapurple": "^9.0.1",
+        "postcss-custom-media": "^10.0.2",
+        "postcss-custom-properties": "^13.3.2",
+        "postcss-custom-selectors": "^7.1.6",
+        "postcss-dir-pseudo-class": "^8.0.0",
+        "postcss-double-position-gradients": "^5.0.2",
+        "postcss-focus-visible": "^9.0.0",
+        "postcss-focus-within": "^8.0.0",
+        "postcss-font-variant": "^5.0.0",
+        "postcss-gap-properties": "^5.0.0",
+        "postcss-image-set-function": "^6.0.1",
+        "postcss-lab-function": "^6.0.7",
+        "postcss-logical": "^7.0.0",
+        "postcss-nesting": "^12.0.1",
+        "postcss-opacity-percentage": "^2.0.0",
+        "postcss-overflow-shorthand": "^5.0.0",
+        "postcss-page-break": "^3.0.4",
+        "postcss-place": "^9.0.0",
+        "postcss-pseudo-class-any-link": "^9.0.0",
+        "postcss-replace-overflow-wrap": "^4.0.0",
+        "postcss-selector-not": "^7.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-pseudo-class-any-link": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-9.0.0.tgz",
+      "integrity": "sha512-QNCYIL98VKFKY6HGDEJpF6+K/sg9bxcUYnOmNHJxZS5wsFDFaVoPeG68WAuhsqwbIBSo/b9fjEnTwY2mTSD+uA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-pxtorem": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-5.1.1.tgz",
+      "integrity": "sha512-uvgIujL/pn0GbZ+rczESD2orHsbXrrCqi+q9wJO8PCk3ZGCoVVtu5hZTbtk+tbZHZP5UkTfCvqOrTZs9Ncqfsg==",
+      "dependencies": {
+        "postcss": "^7.0.27"
+      }
+    },
+    "node_modules/postcss-pxtorem/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
+    },
+    "node_modules/postcss-pxtorem/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-reduce-initial": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
+      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-reduce-transforms": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
+      "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-replace-overflow-wrap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
+      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
+      "peerDependencies": {
+        "postcss": "^8.0.3"
+      }
+    },
+    "node_modules/postcss-selector-not": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-7.0.1.tgz",
+      "integrity": "sha512-1zT5C27b/zeJhchN7fP0kBr16Cc61mu7Si9uWWLoA3Px/D9tIJPKchJCkUH3tPO5D0pCFmGeApAv8XpXBQJ8SQ==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.13",
+      "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-svgo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
+      "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^2.7.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-unique-selectors": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
+      "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
+    "node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/pretty-bytes": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
+      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pretty-error": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/pretty-error/-/pretty-error-4.0.0.tgz",
+      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.20",
+        "renderkid": "^3.0.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "node_modules/progress-webpack-plugin": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmmirror.com/progress-webpack-plugin/-/progress-webpack-plugin-1.0.16.tgz",
+      "integrity": "sha512-sdiHuuKOzELcBANHfrupYo+r99iPRyOnw15qX+rNlVUqXGfjXdH4IgxriKwG1kNJwVswKQHMdj1hYZMcb9jFaA==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.1.0",
+        "figures": "^2.0.0",
+        "log-update": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmmirror.com/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dev": true,
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/proxy-addr/node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true
+    },
+    "node_modules/pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
+      "dev": true
+    },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "dev": true,
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "dev": true,
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/raw-body/node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/read-pkg": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/read-pkg/-/read-pkg-5.2.0.tgz",
+      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+      "dev": true,
+      "dependencies": {
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^2.5.0",
+        "parse-json": "^5.0.0",
+        "type-fest": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/read-pkg-up": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^4.1.0",
+        "read-pkg": "^5.2.0",
+        "type-fest": "^0.8.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true
+    },
+    "node_modules/regenerate-unicode-properties": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmmirror.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz",
+      "integrity": "sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==",
+      "dev": true,
+      "dependencies": {
+        "regenerate": "^1.4.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
+      "dev": true
+    },
+    "node_modules/regenerator-transform": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmmirror.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
+      "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
+      "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "set-function-name": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/regexpu-core": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmmirror.com/regexpu-core/-/regexpu-core-5.3.2.tgz",
+      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/regjsgen": "^0.8.0",
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsparser": "^0.9.1",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/register-service-worker": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmmirror.com/register-service-worker/-/register-service-worker-1.7.2.tgz",
+      "integrity": "sha512-CiD3ZSanZqcMPRhtfct5K9f7i3OLCcBBWsJjLh1gW9RO/nS94sVzY59iS+fgYBOBqaBpf4EzfqUF3j9IG+xo8A=="
+    },
+    "node_modules/regjsparser": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmmirror.com/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+      "dev": true,
+      "dependencies": {
+        "jsesc": "~0.5.0"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/regjsparser/node_modules/jsesc": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-0.5.0.tgz",
+      "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      }
+    },
+    "node_modules/relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmmirror.com/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/renderkid": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/renderkid/-/renderkid-3.0.0.tgz",
+      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
+      "dev": true,
+      "dependencies": {
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^6.0.1"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmmirror.com/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "2.79.1",
+      "resolved": "https://registry.npmmirror.com/rollup/-/rollup-2.79.1.tgz",
+      "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+      "dev": true,
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rollup-plugin-terser": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmmirror.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
+      "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
+      "deprecated": "This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "jest-worker": "^26.2.1",
+        "serialize-javascript": "^4.0.0",
+        "terser": "^5.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.0.0"
+      }
+    },
+    "node_modules/rollup-plugin-terser/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rollup-plugin-terser/node_modules/jest-worker": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmmirror.com/jest-worker/-/jest-worker-26.6.2.tgz",
+      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/rollup-plugin-terser/node_modules/serialize-javascript": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+      "dev": true,
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/rollup-plugin-terser/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
+      "integrity": "sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "node_modules/sax": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/sax/-/sax-1.3.0.tgz",
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
+      "dev": true,
+      "optional": true
+    },
+    "node_modules/schema-utils": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
+      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      }
+    },
+    "node_modules/schema-utils/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/schema-utils/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/schema-utils/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/select-hose": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",
+      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
+      "dev": true
+    },
+    "node_modules/selfsigned": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/selfsigned/-/selfsigned-2.4.1.tgz",
+      "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/node-forge": "^1.3.0",
+        "node-forge": "^1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/send": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmmirror.com/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/send/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
+      "dev": true,
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmmirror.com/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
+      "dev": true,
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.2",
+        "mime-types": "~2.1.17",
+        "parseurl": "~1.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/http-errors": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmmirror.com/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+      "dev": true,
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+      "dev": true
+    },
+    "node_modules/serve-index/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/serve-index/node_modules/setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
+      "dev": true
+    },
+    "node_modules/serve-index/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "dev": true,
+      "dependencies": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.18.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.1.1.tgz",
+      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.1",
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/set-function-name/-/set-function-name-2.0.1.tgz",
+      "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "dev": true
+    },
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/shell-quote/-/shell-quote-1.8.1.tgz",
+      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+      "dev": true
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
+    },
+    "node_modules/sirv": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/sirv/-/sirv-2.0.3.tgz",
+      "integrity": "sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==",
+      "dev": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.20",
+        "mrmime": "^1.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sockjs": {
+      "version": "0.3.24",
+      "resolved": "https://registry.npmmirror.com/sockjs/-/sockjs-0.3.24.tgz",
+      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+      "dev": true,
+      "dependencies": {
+        "faye-websocket": "^0.11.3",
+        "uuid": "^8.3.2",
+        "websocket-driver": "^0.7.4"
+      }
+    },
+    "node_modules/source-list-map": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz",
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
+      "dev": true
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+      "dev": true
+    },
+    "node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/spdx-correct/-/spdx-correct-3.2.0.tgz",
+      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dev": true,
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.16",
+      "resolved": "https://registry.npmmirror.com/spdx-license-ids/-/spdx-license-ids-3.0.16.tgz",
+      "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==",
+      "dev": true
+    },
+    "node_modules/spdy": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/spdy/-/spdy-4.0.2.tgz",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
+        "http-deceiver": "^1.2.7",
+        "select-hose": "^2.0.0",
+        "spdy-transport": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/spdy-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
+        "hpack.js": "^2.1.6",
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
+      }
+    },
+    "node_modules/ssri": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
+      "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
+      "dev": true,
+      "dependencies": {
+        "minipass": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
+      "dev": true
+    },
+    "node_modules/stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmmirror.com/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==",
+      "dev": true
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmmirror.com/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz",
+      "integrity": "sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.5",
+        "regexp.prototype.flags": "^1.5.0",
+        "set-function-name": "^2.0.0",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmmirror.com/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
+      "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz",
+      "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz",
+      "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      }
+    },
+    "node_modules/stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "dependencies": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-comments/-/strip-comments-2.0.1.tgz",
+      "integrity": "sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/strip-eof": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/strip-eof/-/strip-eof-1.0.0.tgz",
+      "integrity": "sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/stylehacks": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/stylehacks/-/stylehacks-5.1.1.tgz",
+      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "dev": true
+    },
+    "node_modules/svgo": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmmirror.com/svgo/-/svgo-2.8.0.tgz",
+      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+      "dev": true,
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "picocolors": "^1.0.0",
+        "stable": "^0.1.8"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/temp-dir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/temp-dir/-/temp-dir-2.0.0.tgz",
+      "integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tempy": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmmirror.com/tempy/-/tempy-0.6.0.tgz",
+      "integrity": "sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==",
+      "dev": true,
+      "dependencies": {
+        "is-stream": "^2.0.0",
+        "temp-dir": "^2.0.0",
+        "type-fest": "^0.16.0",
+        "unique-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tempy/node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tempy/node_modules/type-fest": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-0.16.0.tgz",
+      "integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.24.0",
+      "resolved": "https://registry.npmmirror.com/terser/-/terser-5.24.0.tgz",
+      "integrity": "sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.3.9",
+      "resolved": "https://registry.npmmirror.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz",
+      "integrity": "sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^3.1.1",
+        "serialize-javascript": "^6.0.1",
+        "terser": "^5.16.8"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/thread-loader": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/thread-loader/-/thread-loader-3.0.4.tgz",
+      "integrity": "sha512-ByaL2TPb+m6yArpqQUZvP+5S1mZtXsEP7nWKKlAUTm7fCml8kB5s1uI3+eHRP2bk5mVYfRSBI7FFf+tWEyLZwA==",
+      "dev": true,
+      "dependencies": {
+        "json-parse-better-errors": "^1.0.2",
+        "loader-runner": "^4.1.0",
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "^4.27.0 || ^5.0.0"
+      }
+    },
+    "node_modules/thread-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/thread-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/thread-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/thread-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/thread-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/thunky": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz",
+      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
+      "dev": true
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "dev": true
+    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
+    },
+    "node_modules/type-fest": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-0.6.0.tgz",
+      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmmirror.com/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dev": true,
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
+      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
+      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "dev": true,
+      "dependencies": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-value-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "dev": true,
+      "dependencies": {
+        "crypto-random-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/upath": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4",
+        "yarn": "*"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
+      "dev": true
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vue": {
+      "version": "2.7.15",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.15.tgz",
+      "integrity": "sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ==",
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.15",
+        "csstype": "^3.1.0"
+      }
+    },
+    "node_modules/vue-hot-reload-api": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
+      "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
+      "dev": true
+    },
+    "node_modules/vue-loader": {
+      "version": "17.3.1",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.3.1.tgz",
+      "integrity": "sha512-nmVu7KU8geOyzsStyyaxID/uBGDMS8BkPXb6Lu2SNkMawriIbb+hYrNtgftHMKxOSkjjjTF5OSSwPo3KP59egg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "watchpack": "^2.4.0"
+      },
+      "peerDependencies": {
+        "webpack": "^4.1.0 || ^5.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-loader/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/vue-loader/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/vue-loader/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/vue-loader/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/vue-loader/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/vue-loader/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+    },
+    "node_modules/vue-style-loader": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
+      "integrity": "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==",
+      "dev": true,
+      "dependencies": {
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.0.2"
+      }
+    },
+    "node_modules/vue-style-loader/node_modules/hash-sum": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+      "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+      "dev": true
+    },
+    "node_modules/vue-template-compiler": {
+      "version": "2.7.15",
+      "resolved": "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.15.tgz",
+      "integrity": "sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==",
+      "dev": true,
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
+    "node_modules/vue-template-es2015-compiler": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
+      "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
+      "dev": true
+    },
+    "node_modules/vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
+    "node_modules/watchpack": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "dev": true,
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/wbuf": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmmirror.com/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+      "dev": true,
+      "dependencies": {
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dev": true,
+      "dependencies": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "dev": true
+    },
+    "node_modules/webpack": {
+      "version": "5.89.0",
+      "resolved": "https://registry.npmmirror.com/webpack/-/webpack-5.89.0.tgz",
+      "integrity": "sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==",
+      "dev": true,
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.3",
+        "@types/estree": "^1.0.0",
+        "@webassemblyjs/ast": "^1.11.5",
+        "@webassemblyjs/wasm-edit": "^1.11.5",
+        "@webassemblyjs/wasm-parser": "^1.11.5",
+        "acorn": "^8.7.1",
+        "acorn-import-assertions": "^1.9.0",
+        "browserslist": "^4.14.5",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.15.0",
+        "es-module-lexer": "^1.2.1",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.9",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.2.0",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.3.7",
+        "watchpack": "^2.4.0",
+        "webpack-sources": "^3.2.3"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmmirror.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz",
+      "integrity": "sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==",
+      "dev": true,
+      "dependencies": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "commander": "^7.2.0",
+        "debounce": "^1.2.1",
+        "escape-string-regexp": "^4.0.0",
+        "gzip-size": "^6.0.0",
+        "html-escaper": "^2.0.2",
+        "is-plain-object": "^5.0.0",
+        "opener": "^1.5.2",
+        "picocolors": "^1.0.0",
+        "sirv": "^2.0.3",
+        "ws": "^7.3.1"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/webpack-chain": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmmirror.com/webpack-chain/-/webpack-chain-6.5.1.tgz",
+      "integrity": "sha512-7doO/SRtLu8q5WM0s7vPKPWX580qhi0/yBHkOxNkv50f6qB76Zy9o2wRTrrPULqYTvQlVHuvbA8v+G5ayuUDsA==",
+      "dev": true,
+      "dependencies": {
+        "deepmerge": "^1.5.2",
+        "javascript-stringify": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/webpack-dev-middleware": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmmirror.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
+      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "dev": true,
+      "dependencies": {
+        "colorette": "^2.0.10",
+        "memfs": "^3.4.3",
+        "mime-types": "^2.1.31",
+        "range-parser": "^1.2.1",
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/webpack-dev-server": {
+      "version": "4.15.1",
+      "resolved": "https://registry.npmmirror.com/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz",
+      "integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==",
+      "dev": true,
+      "dependencies": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/express": "^4.17.13",
+        "@types/serve-index": "^1.9.1",
+        "@types/serve-static": "^1.13.10",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.5.5",
+        "ansi-html-community": "^0.0.8",
+        "bonjour-service": "^1.0.11",
+        "chokidar": "^3.5.3",
+        "colorette": "^2.0.10",
+        "compression": "^1.7.4",
+        "connect-history-api-fallback": "^2.0.0",
+        "default-gateway": "^6.0.3",
+        "express": "^4.17.3",
+        "graceful-fs": "^4.2.6",
+        "html-entities": "^2.3.2",
+        "http-proxy-middleware": "^2.0.3",
+        "ipaddr.js": "^2.0.1",
+        "launch-editor": "^2.6.0",
+        "open": "^8.0.9",
+        "p-retry": "^4.5.0",
+        "rimraf": "^3.0.2",
+        "schema-utils": "^4.0.0",
+        "selfsigned": "^2.1.1",
+        "serve-index": "^1.9.1",
+        "sockjs": "^0.3.24",
+        "spdy": "^4.0.2",
+        "webpack-dev-middleware": "^5.3.1",
+        "ws": "^8.13.0"
+      },
+      "bin": {
+        "webpack-dev-server": "bin/webpack-dev-server.js"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "^4.37.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "webpack": {
+          "optional": true
+        },
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/schema-utils": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ws": {
+      "version": "8.14.2",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.14.2.tgz",
+      "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-merge": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmmirror.com/webpack-merge/-/webpack-merge-5.10.0.tgz",
+      "integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==",
+      "dev": true,
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "flat": "^5.0.2",
+        "wildcard": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.6.tgz",
+      "integrity": "sha512-5tyDlKLqPfMqjT3Q9TAqf2YqjwmnUleZwzJi1A5qXnlBCdj2AtOJ6wAWdglTIDOPgOiOrXeBeFcsQ8+aGQ6QbA==",
+      "dev": true
+    },
+    "node_modules/webpack/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/webpack/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/webpack/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/webpack/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmmirror.com/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dev": true,
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmmirror.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/whatwg-fetch": {
+      "version": "3.6.19",
+      "resolved": "https://registry.npmmirror.com/whatwg-fetch/-/whatwg-fetch-3.6.19.tgz",
+      "integrity": "sha512-d67JP4dHSbm2TrpFj8AbO8DnL1JXL5J9u0Kq2xW6d0TFDbCA3Muhdt8orXC22utleTVj7Prqt82baN6RBvnEgw==",
+      "dev": true
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dev": true,
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "dependencies": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmmirror.com/which-typed-array/-/which-typed-array-1.1.13.tgz",
+      "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.4",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/wildcard": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/wildcard/-/wildcard-2.0.1.tgz",
+      "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
+      "dev": true
+    },
+    "node_modules/workbox-background-sync": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-background-sync/-/workbox-background-sync-6.6.0.tgz",
+      "integrity": "sha512-jkf4ZdgOJxC9u2vztxLuPT/UjlH7m/nWRQ/MgGL0v8BJHoZdVGJd18Kck+a0e55wGXdqyHO+4IQTk0685g4MUw==",
+      "dev": true,
+      "dependencies": {
+        "idb": "^7.0.1",
+        "workbox-core": "6.6.0"
+      }
+    },
+    "node_modules/workbox-broadcast-update": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-broadcast-update/-/workbox-broadcast-update-6.6.0.tgz",
+      "integrity": "sha512-nm+v6QmrIFaB/yokJmQ/93qIJ7n72NICxIwQwe5xsZiV2aI93MGGyEyzOzDPVz5THEr5rC3FJSsO3346cId64Q==",
+      "dev": true,
+      "dependencies": {
+        "workbox-core": "6.6.0"
+      }
+    },
+    "node_modules/workbox-build": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-build/-/workbox-build-6.6.0.tgz",
+      "integrity": "sha512-Tjf+gBwOTuGyZwMz2Nk/B13Fuyeo0Q84W++bebbVsfr9iLkDSo6j6PST8tET9HYA58mlRXwlMGpyWO8ETJiXdQ==",
+      "dev": true,
+      "dependencies": {
+        "@apideck/better-ajv-errors": "^0.3.1",
+        "@babel/core": "^7.11.1",
+        "@babel/preset-env": "^7.11.0",
+        "@babel/runtime": "^7.11.2",
+        "@rollup/plugin-babel": "^5.2.0",
+        "@rollup/plugin-node-resolve": "^11.2.1",
+        "@rollup/plugin-replace": "^2.4.1",
+        "@surma/rollup-plugin-off-main-thread": "^2.2.3",
+        "ajv": "^8.6.0",
+        "common-tags": "^1.8.0",
+        "fast-json-stable-stringify": "^2.1.0",
+        "fs-extra": "^9.0.1",
+        "glob": "^7.1.6",
+        "lodash": "^4.17.20",
+        "pretty-bytes": "^5.3.0",
+        "rollup": "^2.43.1",
+        "rollup-plugin-terser": "^7.0.0",
+        "source-map": "^0.8.0-beta.0",
+        "stringify-object": "^3.3.0",
+        "strip-comments": "^2.0.1",
+        "tempy": "^0.6.0",
+        "upath": "^1.2.0",
+        "workbox-background-sync": "6.6.0",
+        "workbox-broadcast-update": "6.6.0",
+        "workbox-cacheable-response": "6.6.0",
+        "workbox-core": "6.6.0",
+        "workbox-expiration": "6.6.0",
+        "workbox-google-analytics": "6.6.0",
+        "workbox-navigation-preload": "6.6.0",
+        "workbox-precaching": "6.6.0",
+        "workbox-range-requests": "6.6.0",
+        "workbox-recipes": "6.6.0",
+        "workbox-routing": "6.6.0",
+        "workbox-strategies": "6.6.0",
+        "workbox-streams": "6.6.0",
+        "workbox-sw": "6.6.0",
+        "workbox-window": "6.6.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/workbox-build/node_modules/source-map": {
+      "version": "0.8.0-beta.0",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.8.0-beta.0.tgz",
+      "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
+      "dev": true,
+      "dependencies": {
+        "whatwg-url": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/workbox-build/node_modules/tr46": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/tr46/-/tr46-1.0.1.tgz",
+      "integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/workbox-build/node_modules/webidl-conversions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
+      "dev": true
+    },
+    "node_modules/workbox-build/node_modules/whatwg-url": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-7.1.0.tgz",
+      "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
+      "dev": true,
+      "dependencies": {
+        "lodash.sortby": "^4.7.0",
+        "tr46": "^1.0.1",
+        "webidl-conversions": "^4.0.2"
+      }
+    },
+    "node_modules/workbox-cacheable-response": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-cacheable-response/-/workbox-cacheable-response-6.6.0.tgz",
+      "integrity": "sha512-JfhJUSQDwsF1Xv3EV1vWzSsCOZn4mQ38bWEBR3LdvOxSPgB65gAM6cS2CX8rkkKHRgiLrN7Wxoyu+TuH67kHrw==",
+      "deprecated": "workbox-background-sync@6.6.0",
+      "dev": true,
+      "dependencies": {
+        "workbox-core": "6.6.0"
+      }
+    },
+    "node_modules/workbox-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-core/-/workbox-core-6.6.0.tgz",
+      "integrity": "sha512-GDtFRF7Yg3DD859PMbPAYPeJyg5gJYXuBQAC+wyrWuuXgpfoOrIQIvFRZnQ7+czTIQjIr1DhLEGFzZanAT/3bQ==",
+      "dev": true
+    },
+    "node_modules/workbox-expiration": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-expiration/-/workbox-expiration-6.6.0.tgz",
+      "integrity": "sha512-baplYXcDHbe8vAo7GYvyAmlS4f6998Jff513L4XvlzAOxcl8F620O91guoJ5EOf5qeXG4cGdNZHkkVAPouFCpw==",
+      "dev": true,
+      "dependencies": {
+        "idb": "^7.0.1",
+        "workbox-core": "6.6.0"
+      }
+    },
+    "node_modules/workbox-google-analytics": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-google-analytics/-/workbox-google-analytics-6.6.0.tgz",
+      "integrity": "sha512-p4DJa6OldXWd6M9zRl0H6vB9lkrmqYFkRQ2xEiNdBFp9U0LhsGO7hsBscVEyH9H2/3eZZt8c97NB2FD9U2NJ+Q==",
+      "dev": true,
+      "dependencies": {
+        "workbox-background-sync": "6.6.0",
+        "workbox-core": "6.6.0",
+        "workbox-routing": "6.6.0",
+        "workbox-strategies": "6.6.0"
+      }
+    },
+    "node_modules/workbox-navigation-preload": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-navigation-preload/-/workbox-navigation-preload-6.6.0.tgz",
+      "integrity": "sha512-utNEWG+uOfXdaZmvhshrh7KzhDu/1iMHyQOV6Aqup8Mm78D286ugu5k9MFD9SzBT5TcwgwSORVvInaXWbvKz9Q==",
+      "dev": true,
+      "dependencies": {
+        "workbox-core": "6.6.0"
+      }
+    },
+    "node_modules/workbox-precaching": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-precaching/-/workbox-precaching-6.6.0.tgz",
+      "integrity": "sha512-eYu/7MqtRZN1IDttl/UQcSZFkHP7dnvr/X3Vn6Iw6OsPMruQHiVjjomDFCNtd8k2RdjLs0xiz9nq+t3YVBcWPw==",
+      "dev": true,
+      "dependencies": {
+        "workbox-core": "6.6.0",
+        "workbox-routing": "6.6.0",
+        "workbox-strategies": "6.6.0"
+      }
+    },
+    "node_modules/workbox-range-requests": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-range-requests/-/workbox-range-requests-6.6.0.tgz",
+      "integrity": "sha512-V3aICz5fLGq5DpSYEU8LxeXvsT//mRWzKrfBOIxzIdQnV/Wj7R+LyJVTczi4CQ4NwKhAaBVaSujI1cEjXW+hTw==",
+      "dev": true,
+      "dependencies": {
+        "workbox-core": "6.6.0"
+      }
+    },
+    "node_modules/workbox-recipes": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-recipes/-/workbox-recipes-6.6.0.tgz",
+      "integrity": "sha512-TFi3kTgYw73t5tg73yPVqQC8QQjxJSeqjXRO4ouE/CeypmP2O/xqmB/ZFBBQazLTPxILUQ0b8aeh0IuxVn9a6A==",
+      "dev": true,
+      "dependencies": {
+        "workbox-cacheable-response": "6.6.0",
+        "workbox-core": "6.6.0",
+        "workbox-expiration": "6.6.0",
+        "workbox-precaching": "6.6.0",
+        "workbox-routing": "6.6.0",
+        "workbox-strategies": "6.6.0"
+      }
+    },
+    "node_modules/workbox-routing": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-routing/-/workbox-routing-6.6.0.tgz",
+      "integrity": "sha512-x8gdN7VDBiLC03izAZRfU+WKUXJnbqt6PG9Uh0XuPRzJPpZGLKce/FkOX95dWHRpOHWLEq8RXzjW0O+POSkKvw==",
+      "dev": true,
+      "dependencies": {
+        "workbox-core": "6.6.0"
+      }
+    },
+    "node_modules/workbox-strategies": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-strategies/-/workbox-strategies-6.6.0.tgz",
+      "integrity": "sha512-eC07XGuINAKUWDnZeIPdRdVja4JQtTuc35TZ8SwMb1ztjp7Ddq2CJ4yqLvWzFWGlYI7CG/YGqaETntTxBGdKgQ==",
+      "dev": true,
+      "dependencies": {
+        "workbox-core": "6.6.0"
+      }
+    },
+    "node_modules/workbox-streams": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-streams/-/workbox-streams-6.6.0.tgz",
+      "integrity": "sha512-rfMJLVvwuED09CnH1RnIep7L9+mj4ufkTyDPVaXPKlhi9+0czCu+SJggWCIFbPpJaAZmp2iyVGLqS3RUmY3fxg==",
+      "dev": true,
+      "dependencies": {
+        "workbox-core": "6.6.0",
+        "workbox-routing": "6.6.0"
+      }
+    },
+    "node_modules/workbox-sw": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-sw/-/workbox-sw-6.6.0.tgz",
+      "integrity": "sha512-R2IkwDokbtHUE4Kus8pKO5+VkPHD2oqTgl+XJwh4zbF1HyjAbgNmK/FneZHVU7p03XUt9ICfuGDYISWG9qV/CQ==",
+      "dev": true
+    },
+    "node_modules/workbox-webpack-plugin": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.6.0.tgz",
+      "integrity": "sha512-xNZIZHalboZU66Wa7x1YkjIqEy1gTR+zPM+kjrYJzqN7iurYZBctBLISyScjhkJKYuRrZUP0iqViZTh8rS0+3A==",
+      "dev": true,
+      "dependencies": {
+        "fast-json-stable-stringify": "^2.1.0",
+        "pretty-bytes": "^5.4.1",
+        "upath": "^1.2.0",
+        "webpack-sources": "^1.4.3",
+        "workbox-build": "6.6.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "webpack": "^4.4.0 || ^5.9.0"
+      }
+    },
+    "node_modules/workbox-webpack-plugin/node_modules/webpack-sources": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-1.4.3.tgz",
+      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
+      "dev": true,
+      "dependencies": {
+        "source-list-map": "^2.0.0",
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/workbox-window": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-window/-/workbox-window-6.6.0.tgz",
+      "integrity": "sha512-L4N9+vka17d16geaJXXRjENLFldvkWy7JyGxElRD0JvBxvFEd8LOhr+uXCcar/NzAmIBRv9EZ+M+Qr4mOoBITw==",
+      "dev": true,
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2",
+        "workbox-core": "6.6.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "node_modules/ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmmirror.com/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmmirror.com/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/zrender": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
+      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    }
+  },
+  "dependencies": {
+    "@achrinza/node-ipc": {
+      "version": "9.2.8",
+      "resolved": "https://registry.npmmirror.com/@achrinza/node-ipc/-/node-ipc-9.2.8.tgz",
+      "integrity": "sha512-DSzEEkbMYbAUVlhy7fg+BzccoRuSQzqHbIPGxGv19OJ2WKwS3/9ChAnQcII4g+GujcHhyJ8BUuOVAx/S5uAfQg==",
+      "dev": true,
+      "requires": {
+        "@node-ipc/js-queue": "2.0.3",
+        "event-pubsub": "4.3.0",
+        "js-message": "1.0.7"
+      }
+    },
+    "@ampproject/remapping": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@apideck/better-ajv-errors": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmmirror.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
+      "integrity": "sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==",
+      "dev": true,
+      "requires": {
+        "json-schema": "^0.4.0",
+        "jsonpointer": "^5.0.0",
+        "leven": "^3.1.0"
+      }
+    },
+    "@babel/code-frame": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.23.4.tgz",
+      "integrity": "sha512-r1IONyb6Ia+jYR2vvIDhdWdlTGhqbBoFqLTQidzZ4kepUFH15ejXvFHxCVbtl7BOXIudsIubf4E81xeA3h3IXA==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.23.4",
+        "chalk": "^2.4.2"
+      }
+    },
+    "@babel/compat-data": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.23.3.tgz",
+      "integrity": "sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==",
+      "dev": true
+    },
+    "@babel/core": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.23.3.tgz",
+      "integrity": "sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==",
+      "dev": true,
+      "requires": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.22.13",
+        "@babel/generator": "^7.23.3",
+        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helpers": "^7.23.2",
+        "@babel/parser": "^7.23.3",
+        "@babel/template": "^7.22.15",
+        "@babel/traverse": "^7.23.3",
+        "@babel/types": "^7.23.3",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      }
+    },
+    "@babel/generator": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.23.4.tgz",
+      "integrity": "sha512-esuS49Cga3HcThFNebGhlgsrVLkvhqvYDTzgjfFFlHJcIfLe5jFmRRfCQ1KuBfc4Jrtn3ndLgKWAKjBE+IraYQ==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.23.4",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jsesc": "^2.5.1"
+      }
+    },
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+      "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.5"
+      }
+    },
+    "@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz",
+      "integrity": "sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.15"
+      }
+    },
+    "@babel/helper-compilation-targets": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz",
+      "integrity": "sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.22.9",
+        "@babel/helper-validator-option": "^7.22.15",
+        "browserslist": "^4.21.9",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      }
+    },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.15.tgz",
+      "integrity": "sha512-jKkwA59IXcvSaiK2UN45kKwSC9o+KuoXsBDvHvU/7BecYIp8GQ2UwrVvFgJASUT+hBnwJx6MhvMCuMzwZZ7jlg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/helper-member-expression-to-functions": "^7.22.15",
+        "@babel/helper-optimise-call-expression": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.9",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "semver": "^6.3.1"
+      }
+    },
+    "@babel/helper-create-regexp-features-plugin": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz",
+      "integrity": "sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "regexpu-core": "^5.3.1",
+        "semver": "^6.3.1"
+      }
+    },
+    "@babel/helper-define-polyfill-provider": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.3.tgz",
+      "integrity": "sha512-WBrLmuPP47n7PNwsZ57pqam6G/RGo1vw/87b0Blc53tZNGZ4x7YvZ6HgQe2vo1W/FR20OgjeZuGXzudPiXHFug==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-compilation-targets": "^7.22.6",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2"
+      }
+    },
+    "@babel/helper-environment-visitor": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
+      "dev": true
+    },
+    "@babel/helper-function-name": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+      "dev": true,
+      "requires": {
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.5"
+      }
+    },
+    "@babel/helper-member-expression-to-functions": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz",
+      "integrity": "sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.23.0"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.15"
+      }
+    },
+    "@babel/helper-module-transforms": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
+      "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-simple-access": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/helper-validator-identifier": "^7.22.20"
+      }
+    },
+    "@babel/helper-optimise-call-expression": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
+      "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.5"
+      }
+    },
+    "@babel/helper-plugin-utils": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+      "dev": true
+    },
+    "@babel/helper-remap-async-to-generator": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz",
+      "integrity": "sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-wrap-function": "^7.22.20"
+      }
+    },
+    "@babel/helper-replace-supers": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz",
+      "integrity": "sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-member-expression-to-functions": "^7.22.15",
+        "@babel/helper-optimise-call-expression": "^7.22.5"
+      }
+    },
+    "@babel/helper-simple-access": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+      "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.5"
+      }
+    },
+    "@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
+      "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.5"
+      }
+    },
+    "@babel/helper-split-export-declaration": {
+      "version": "7.22.6",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.5"
+      }
+    },
+    "@babel/helper-string-parser": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+      "dev": true
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "dev": true
+    },
+    "@babel/helper-validator-option": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz",
+      "integrity": "sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==",
+      "dev": true
+    },
+    "@babel/helper-wrap-function": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz",
+      "integrity": "sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.22.19"
+      }
+    },
+    "@babel/helpers": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.23.4.tgz",
+      "integrity": "sha512-HfcMizYz10cr3h29VqyfGL6ZWIjTwWfvYBMsBVGwpcbhNGe3wQ1ZXZRPzZoAHhd9OqHadHqjQ89iVKINXnbzuw==",
+      "dev": true,
+      "requires": {
+        "@babel/template": "^7.22.15",
+        "@babel/traverse": "^7.23.4",
+        "@babel/types": "^7.23.4"
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/highlight/-/highlight-7.23.4.tgz",
+      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@babel/parser": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.4.tgz",
+      "integrity": "sha512-vf3Xna6UEprW+7t6EtOmFpHNAuxw3xqPZghy+brsnusscJRW5BMUzzHZc5ICjULee81WeUV2jjakG09MDglJXQ=="
+    },
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.23.3.tgz",
+      "integrity": "sha512-iRkKcCqb7iGnq9+3G6rZ+Ciz5VywC4XNRHe57lKM+jOeYAoR0lVqdeeDRfh0tQcTfw/+vBhHn926FmQhLtlFLQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.23.3.tgz",
+      "integrity": "sha512-WwlxbfMNdVEpQjZmK5mhm7oSwD3dS6eU+Iwsi4Knl9wAletWem7kaRsGOG+8UEbRyqxY4SS5zvtfXwX+jMxUwQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-transform-optional-chaining": "^7.23.3"
+      }
+    },
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.3.tgz",
+      "integrity": "sha512-XaJak1qcityzrX0/IU5nKHb34VaibwP3saKqG6a/tppelgllOH13LUann4ZCIBcVOeE6H18K4Vx9QKkVww3z/w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-proposal-class-properties": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
+      "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-proposal-decorators": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.23.3.tgz",
+      "integrity": "sha512-u8SwzOcP0DYSsa++nHd/9exlHb0NAlHCb890qtZZbSwPX2bFv8LBEztxwN7Xg/dS8oAFFidhrI9PBcLBJSkGRQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.20",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/plugin-syntax-decorators": "^7.23.3"
+      }
+    },
+    "@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "dev": true,
+      "requires": {}
+    },
+    "@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-decorators": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.23.3.tgz",
+      "integrity": "sha512-cf7Niq4/+/juY67E0PbgH0TDhLQ5J7zS8C/Q5FFx+DWyrRa9sUQdTXkjqKu8zGvuqr7vw1muKiukseihU+PJDA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      }
+    },
+    "@babel/plugin-syntax-import-assertions": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.23.3.tgz",
+      "integrity": "sha512-lPgDSU+SJLK3xmFDTV2ZRQAiM7UuUjGidwBywFavObCiZc1BeAAcMtHJKUya92hPHO+at63JJPLygilZard8jw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-syntax-import-attributes": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.23.3.tgz",
+      "integrity": "sha512-pawnE0P9g10xgoP7yKr6CK63K2FMsTE+FZidZO/1PwRdzmAPVs+HS1mAURUsgaoxammTJvULUdIkEK0gOcU2tA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz",
+      "integrity": "sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-unicode-sets-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-arrow-functions": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.23.3.tgz",
+      "integrity": "sha512-NzQcQrzaQPkaEwoTm4Mhyl8jI1huEL/WWIEvudjTCMJ9aBZNpsJbMASx7EQECtQQPS/DcnFpo0FIh3LvEO9cxQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-async-generator-functions": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.4.tgz",
+      "integrity": "sha512-efdkfPhHYTtn0G6n2ddrESE91fgXxjlqLsnUtPWnJs4a4mZIbUaK7ffqKIIUKXSHwcDvaCVX6GXkaJJFqtX7jw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-remap-async-to-generator": "^7.22.20",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      }
+    },
+    "@babel/plugin-transform-async-to-generator": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.23.3.tgz",
+      "integrity": "sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-remap-async-to-generator": "^7.22.20"
+      }
+    },
+    "@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.23.3.tgz",
+      "integrity": "sha512-vI+0sIaPIO6CNuM9Kk5VmXcMVRiOpDh7w2zZt9GXzmE/9KD70CUEVhvPR/etAeNK/FAEkhxQtXOzVF3EuRL41A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-block-scoping": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.4.tgz",
+      "integrity": "sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-class-properties": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.23.3.tgz",
+      "integrity": "sha512-uM+AN8yCIjDPccsKGlw271xjJtGii+xQIF/uMPS8H15L12jZTsLfF4o5vNO7d/oUguOyfdikHGc/yi9ge4SGIg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-class-static-block": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.23.4.tgz",
+      "integrity": "sha512-nsWu/1M+ggti1SOALj3hfx5FXzAY06fwPJsUZD4/A5e1bWi46VUIWtD+kOX6/IdhXGsXBWllLFDSnqSCdUNydQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      }
+    },
+    "@babel/plugin-transform-classes": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.3.tgz",
+      "integrity": "sha512-FGEQmugvAEu2QtgtU0uTASXevfLMFfBeVCIIdcQhn/uBQsMTjBajdnAtanQlOcuihWh10PZ7+HWvc7NtBwP74w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-optimise-call-expression": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.20",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/plugin-transform-computed-properties": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.23.3.tgz",
+      "integrity": "sha512-dTj83UVTLw/+nbiHqQSFdwO9CbTtwq1DsDqm3CUEtDrZNET5rT5E6bIdTlOftDTDLMYxvxHNEYO4B9SLl8SLZw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/template": "^7.22.15"
+      }
+    },
+    "@babel/plugin-transform-destructuring": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.23.3.tgz",
+      "integrity": "sha512-n225npDqjDIr967cMScVKHXJs7rout1q+tt50inyBCPkyZ8KxeI6d+GIbSBTT/w/9WdlWDOej3V9HE5Lgk57gw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-dotall-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.23.3.tgz",
+      "integrity": "sha512-vgnFYDHAKzFaTVp+mneDsIEbnJ2Np/9ng9iviHw3P/KVcgONxpNULEW/51Z/BaFojG2GI2GwwXck5uV1+1NOYQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-duplicate-keys": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.23.3.tgz",
+      "integrity": "sha512-RrqQ+BQmU3Oyav3J+7/myfvRCq7Tbz+kKLLshUmMwNlDHExbGL7ARhajvoBJEvc+fCguPPu887N+3RRXBVKZUA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-dynamic-import": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.23.4.tgz",
+      "integrity": "sha512-V6jIbLhdJK86MaLh4Jpghi8ho5fGzt3imHOBu/x0jlBaPYqDoWz4RDXjmMOfnh+JWNaQleEAByZLV0QzBT4YQQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.23.3.tgz",
+      "integrity": "sha512-5fhCsl1odX96u7ILKHBj4/Y8vipoqwsJMh4csSA8qFfxrZDEA4Ssku2DyNvMJSmZNOEBT750LfFPbtrnTP90BQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-export-namespace-from": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.23.4.tgz",
+      "integrity": "sha512-GzuSBcKkx62dGzZI1WVgTWvkkz84FZO5TC5T8dl/Tht/rAla6Dg/Mz9Yhypg+ezVACf/rgDuQt3kbWEv7LdUDQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-for-of": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.23.3.tgz",
+      "integrity": "sha512-X8jSm8X1CMwxmK878qsUGJRmbysKNbdpTv/O1/v0LuY/ZkZrng5WYiekYSdg9m09OTmDDUWeEDsTE+17WYbAZw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-function-name": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.23.3.tgz",
+      "integrity": "sha512-I1QXp1LxIvt8yLaib49dRW5Okt7Q4oaxao6tFVKS/anCdEOMtYwWVKoiOA1p34GOWIZjUK0E+zCp7+l1pfQyiw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-json-strings": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.23.4.tgz",
+      "integrity": "sha512-81nTOqM1dMwZ/aRXQ59zVubN9wHGqk6UtqRK+/q+ciXmRy8fSolhGVvG09HHRGo4l6fr/c4ZhXUQH0uFW7PZbg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-literals": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.23.3.tgz",
+      "integrity": "sha512-wZ0PIXRxnwZvl9AYpqNUxpZ5BiTGrYt7kueGQ+N5FiQ7RCOD4cm8iShd6S6ggfVIWaJf2EMk8eRzAh52RfP4rQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.23.4.tgz",
+      "integrity": "sha512-Mc/ALf1rmZTP4JKKEhUwiORU+vcfarFVLfcFiolKUo6sewoxSEgl36ak5t+4WamRsNr6nzjZXQjM35WsU+9vbg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-member-expression-literals": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.23.3.tgz",
+      "integrity": "sha512-sC3LdDBDi5x96LA+Ytekz2ZPk8i/Ck+DEuDbRAll5rknJ5XRTSaPKEYwomLcs1AA8wg9b3KjIQRsnApj+q51Ag==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-modules-amd": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.23.3.tgz",
+      "integrity": "sha512-vJYQGxeKM4t8hYCKVBlZX/gtIY2I7mRGFNcm85sgXGMTBcoV3QdVtdpbcWEbzbfUIUZKwvgFT82mRvaQIebZzw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-modules-commonjs": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz",
+      "integrity": "sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-simple-access": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-modules-systemjs": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.3.tgz",
+      "integrity": "sha512-ZxyKGTkF9xT9YJuKQRo19ewf3pXpopuYQd8cDXqNzc3mUNbOME0RKMoZxviQk74hwzfQsEe66dE92MaZbdHKNQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20"
+      }
+    },
+    "@babel/plugin-transform-modules-umd": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.23.3.tgz",
+      "integrity": "sha512-zHsy9iXX2nIsCBFPud3jKn1IRPWg3Ing1qOZgeKV39m1ZgIdpJqvlWVeiHBZC6ITRG0MfskhYe9cLgntfSFPIg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
+      "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-new-target": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.23.3.tgz",
+      "integrity": "sha512-YJ3xKqtJMAT5/TIZnpAR3I+K+WaDowYbN3xyxI8zxx/Gsypwf9B9h0VB+1Nh6ACAAPRS5NSRje0uVv5i79HYGQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.23.4.tgz",
+      "integrity": "sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-numeric-separator": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.23.4.tgz",
+      "integrity": "sha512-mps6auzgwjRrwKEZA05cOwuDc9FAzoyFS4ZsG/8F43bTLf/TgkJg7QXOrPO1JO599iA3qgK9MXdMGOEC8O1h6Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-object-rest-spread": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.23.4.tgz",
+      "integrity": "sha512-9x9K1YyeQVw0iOXJlIzwm8ltobIIv7j2iLyP2jIhEbqPRQ7ScNgwQufU2I0Gq11VjyG4gI4yMXt2VFags+1N3g==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.23.3",
+        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.23.3"
+      }
+    },
+    "@babel/plugin-transform-object-super": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.23.3.tgz",
+      "integrity": "sha512-BwQ8q0x2JG+3lxCVFohg+KbQM7plfpBwThdW9A6TMtWwLsbDA01Ek2Zb/AgDN39BiZsExm4qrXxjk+P1/fzGrA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.20"
+      }
+    },
+    "@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.23.4.tgz",
+      "integrity": "sha512-XIq8t0rJPHf6Wvmbn9nFxU6ao4c7WhghTR5WyV8SrJfUFzyxhCm4nhC+iAp3HFhbAKLfYpgzhJ6t4XCtVwqO5A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-optional-chaining": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.4.tgz",
+      "integrity": "sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-parameters": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.23.3.tgz",
+      "integrity": "sha512-09lMt6UsUb3/34BbECKVbVwrT9bO6lILWln237z7sLaWnMsTi7Yc9fhX5DLpkJzAGfaReXI22wP41SZmnAA3Vw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-private-methods": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.23.3.tgz",
+      "integrity": "sha512-UzqRcRtWsDMTLrRWFvUBDwmw06tCQH9Rl1uAjfh6ijMSmGYQ+fpdB+cnqRC8EMh5tuuxSv0/TejGL+7vyj+50g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-private-property-in-object": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.23.4.tgz",
+      "integrity": "sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      }
+    },
+    "@babel/plugin-transform-property-literals": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.23.3.tgz",
+      "integrity": "sha512-jR3Jn3y7cZp4oEWPFAlRsSWjxKe4PZILGBSd4nis1TsC5qeSpb+nrtihJuDhNI7QHiVbUaiXa0X2RZY3/TI6Nw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-regenerator": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.23.3.tgz",
+      "integrity": "sha512-KP+75h0KghBMcVpuKisx3XTu9Ncut8Q8TuvGO4IhY+9D5DFEckQefOuIsB/gQ2tG71lCke4NMrtIPS8pOj18BQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "regenerator-transform": "^0.15.2"
+      }
+    },
+    "@babel/plugin-transform-reserved-words": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.23.3.tgz",
+      "integrity": "sha512-QnNTazY54YqgGxwIexMZva9gqbPa15t/x9VS+0fsEFWplwVpXYZivtgl43Z1vMpc1bdPP2PP8siFeVcnFvA3Cg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-runtime": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.23.4.tgz",
+      "integrity": "sha512-ITwqpb6V4btwUG0YJR82o2QvmWrLgDnx/p2A3CTPYGaRgULkDiC0DRA2C4jlRB9uXGUEfaSS/IGHfVW+ohzYDw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "babel-plugin-polyfill-corejs2": "^0.4.6",
+        "babel-plugin-polyfill-corejs3": "^0.8.5",
+        "babel-plugin-polyfill-regenerator": "^0.5.3",
+        "semver": "^6.3.1"
+      }
+    },
+    "@babel/plugin-transform-shorthand-properties": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.23.3.tgz",
+      "integrity": "sha512-ED2fgqZLmexWiN+YNFX26fx4gh5qHDhn1O2gvEhreLW2iI63Sqm4llRLCXALKrCnbN4Jy0VcMQZl/SAzqug/jg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-spread": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.23.3.tgz",
+      "integrity": "sha512-VvfVYlrlBVu+77xVTOAoxQ6mZbnIq5FM0aGBSFEcIh03qHf+zNqA4DC/3XMUozTg7bZV3e3mZQ0i13VB6v5yUg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-sticky-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.23.3.tgz",
+      "integrity": "sha512-HZOyN9g+rtvnOU3Yh7kSxXrKbzgrm5X4GncPY1QOquu7epga5MxKHVpYu2hvQnry/H+JjckSYRb93iNfsioAGg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-template-literals": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.23.3.tgz",
+      "integrity": "sha512-Flok06AYNp7GV2oJPZZcP9vZdszev6vPBkHLwxwSpaIqx75wn6mUd3UFWsSsA0l8nXAKkyCmL/sR02m8RYGeHg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-typeof-symbol": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.23.3.tgz",
+      "integrity": "sha512-4t15ViVnaFdrPC74be1gXBSMzXk3B4Us9lP7uLRQHTFpV5Dvt33pn+2MyyNxmN3VTTm3oTrZVMUmuw3oBnQ2oQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-unicode-escapes": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.23.3.tgz",
+      "integrity": "sha512-OMCUx/bU6ChE3r4+ZdylEqAjaQgHAgipgW8nsCfu5pGqDcFytVd91AwRvUJSBZDz0exPGgnjoqhgRYLRjFZc9Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.23.3.tgz",
+      "integrity": "sha512-KcLIm+pDZkWZQAFJ9pdfmh89EwVfmNovFBcXko8szpBeF8z68kWIPeKlmSOkT9BXJxs2C0uk+5LxoxIv62MROA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-unicode-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.23.3.tgz",
+      "integrity": "sha512-wMHpNA4x2cIA32b/ci3AfwNgheiva2W0WUKWTK7vBHBhDKfPsc5cFGNWm69WBqpwd86u1qwZ9PWevKqm1A3yAw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.23.3.tgz",
+      "integrity": "sha512-W7lliA/v9bNR83Qc3q1ip9CQMZ09CcHDbHfbLRDNuAhn1Mvkr1ZNF7hPmztMQvtTGVLJ9m8IZqWsTkXOml8dbw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      }
+    },
+    "@babel/preset-env": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmmirror.com/@babel/preset-env/-/preset-env-7.23.3.tgz",
+      "integrity": "sha512-ovzGc2uuyNfNAs/jyjIGxS8arOHS5FENZaNn4rtE7UdKMMkqHCvboHfcuhWLZNX5cB44QfcGNWjaevxMzzMf+Q==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.23.3",
+        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.15",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.23.3",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.23.3",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.23.3",
+        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-import-assertions": "^7.23.3",
+        "@babel/plugin-syntax-import-attributes": "^7.23.3",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.23.3",
+        "@babel/plugin-transform-async-generator-functions": "^7.23.3",
+        "@babel/plugin-transform-async-to-generator": "^7.23.3",
+        "@babel/plugin-transform-block-scoped-functions": "^7.23.3",
+        "@babel/plugin-transform-block-scoping": "^7.23.3",
+        "@babel/plugin-transform-class-properties": "^7.23.3",
+        "@babel/plugin-transform-class-static-block": "^7.23.3",
+        "@babel/plugin-transform-classes": "^7.23.3",
+        "@babel/plugin-transform-computed-properties": "^7.23.3",
+        "@babel/plugin-transform-destructuring": "^7.23.3",
+        "@babel/plugin-transform-dotall-regex": "^7.23.3",
+        "@babel/plugin-transform-duplicate-keys": "^7.23.3",
+        "@babel/plugin-transform-dynamic-import": "^7.23.3",
+        "@babel/plugin-transform-exponentiation-operator": "^7.23.3",
+        "@babel/plugin-transform-export-namespace-from": "^7.23.3",
+        "@babel/plugin-transform-for-of": "^7.23.3",
+        "@babel/plugin-transform-function-name": "^7.23.3",
+        "@babel/plugin-transform-json-strings": "^7.23.3",
+        "@babel/plugin-transform-literals": "^7.23.3",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.23.3",
+        "@babel/plugin-transform-member-expression-literals": "^7.23.3",
+        "@babel/plugin-transform-modules-amd": "^7.23.3",
+        "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+        "@babel/plugin-transform-modules-systemjs": "^7.23.3",
+        "@babel/plugin-transform-modules-umd": "^7.23.3",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
+        "@babel/plugin-transform-new-target": "^7.23.3",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.3",
+        "@babel/plugin-transform-numeric-separator": "^7.23.3",
+        "@babel/plugin-transform-object-rest-spread": "^7.23.3",
+        "@babel/plugin-transform-object-super": "^7.23.3",
+        "@babel/plugin-transform-optional-catch-binding": "^7.23.3",
+        "@babel/plugin-transform-optional-chaining": "^7.23.3",
+        "@babel/plugin-transform-parameters": "^7.23.3",
+        "@babel/plugin-transform-private-methods": "^7.23.3",
+        "@babel/plugin-transform-private-property-in-object": "^7.23.3",
+        "@babel/plugin-transform-property-literals": "^7.23.3",
+        "@babel/plugin-transform-regenerator": "^7.23.3",
+        "@babel/plugin-transform-reserved-words": "^7.23.3",
+        "@babel/plugin-transform-shorthand-properties": "^7.23.3",
+        "@babel/plugin-transform-spread": "^7.23.3",
+        "@babel/plugin-transform-sticky-regex": "^7.23.3",
+        "@babel/plugin-transform-template-literals": "^7.23.3",
+        "@babel/plugin-transform-typeof-symbol": "^7.23.3",
+        "@babel/plugin-transform-unicode-escapes": "^7.23.3",
+        "@babel/plugin-transform-unicode-property-regex": "^7.23.3",
+        "@babel/plugin-transform-unicode-regex": "^7.23.3",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.23.3",
+        "@babel/preset-modules": "0.1.6-no-external-plugins",
+        "babel-plugin-polyfill-corejs2": "^0.4.6",
+        "babel-plugin-polyfill-corejs3": "^0.8.5",
+        "babel-plugin-polyfill-regenerator": "^0.5.3",
+        "core-js-compat": "^3.31.0",
+        "semver": "^6.3.1"
+      }
+    },
+    "@babel/preset-modules": {
+      "version": "0.1.6-no-external-plugins",
+      "resolved": "https://registry.npmmirror.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      }
+    },
+    "@babel/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmmirror.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==",
+      "dev": true
+    },
+    "@babel/runtime": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.23.4.tgz",
+      "integrity": "sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==",
+      "dev": true,
+      "requires": {
+        "regenerator-runtime": "^0.14.0"
+      }
+    },
+    "@babel/template": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.22.15.tgz",
+      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.22.13",
+        "@babel/parser": "^7.22.15",
+        "@babel/types": "^7.22.15"
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.23.4.tgz",
+      "integrity": "sha512-IYM8wSUwunWTB6tFC2dkKZhxbIjHoWemdK+3f8/wq8aKhbUscxD5MX72ubd90fxvFknaLPeGw5ycU84V1obHJg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.23.4",
+        "@babel/generator": "^7.23.4",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.23.4",
+        "@babel/types": "^7.23.4",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/types": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.23.4.tgz",
+      "integrity": "sha512-7uIFwVYpoplT5jp/kVv6EF93VaJ8H+Yn5IczYiaAi98ajzjfoZfslet/e0sLh+wVBjb2qqIut1b0S26VSafsSQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@csstools/cascade-layer-name-parser": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.5.tgz",
+      "integrity": "sha512-v/5ODKNBMfBl0us/WQjlfsvSlYxfZLhNMVIsuCPib2ulTwGKYbKJbwqw671+qH9Y4wvWVnu7LBChvml/wBKjFg==",
+      "requires": {}
+    },
+    "@csstools/color-helpers": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-3.0.2.tgz",
+      "integrity": "sha512-NMVs/l7Y9eIKL5XjbCHEgGcG8LOUT2qVcRjX6EzkCdlvftHVKr2tHIPzHavfrULRZ5Q2gxrJ9f44dAlj6fX97Q=="
+    },
+    "@csstools/css-calc": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-1.1.4.tgz",
+      "integrity": "sha512-ZV1TSmToiNcQL1P3hfzlzZzA02mmVkVmXGaUDUqpYUG84PmLhVSZpKX+KfxAuOcK7de04UXSQPBrAvaya6iiGg==",
+      "requires": {}
+    },
+    "@csstools/css-color-parser": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-1.4.0.tgz",
+      "integrity": "sha512-SlGd8E6ron24JYQPQAIzu5tvmWi1H4sDKTdA7UDnwF45oJv7AVESbOlOO1YjfBhrQFuvLWUgKiOY9DwGoAxwTA==",
+      "requires": {
+        "@csstools/color-helpers": "^3.0.2",
+        "@csstools/css-calc": "^1.1.4"
+      }
+    },
+    "@csstools/css-parser-algorithms": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.2.tgz",
+      "integrity": "sha512-sLYGdAdEY2x7TSw9FtmdaTrh2wFtRJO5VMbBrA8tEqEod7GEggFmxTSK9XqExib3yMuYNcvcTdCZIP6ukdjAIA==",
+      "requires": {}
+    },
+    "@csstools/css-tokenizer": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.1.tgz",
+      "integrity": "sha512-Zmsf2f/CaEPWEVgw29odOj+WEVoiJy9s9NOv5GgNY9mZ1CZ7394By6wONrONrTsnNDv6F9hR02nvFihrGVGHBg=="
+    },
+    "@csstools/media-query-list-parser": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.5.tgz",
+      "integrity": "sha512-IxVBdYzR8pYe89JiyXQuYk4aVVoCPhMJkz6ElRwlVysjwURTsTk/bmY/z4FfeRE+CRBMlykPwXEVUg8lThv7AQ==",
+      "requires": {}
+    },
+    "@csstools/postcss-cascade-layers": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.1.tgz",
+      "integrity": "sha512-UYFuFL9GgVnftg9v7tBvVEBRLaBeAD66euD+yYy5fYCUld9ZIWTJNCE30hm6STMEdt6FL5xzeVw1lAZ1tpvUEg==",
+      "requires": {
+        "@csstools/selector-specificity": "^3.0.0",
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "@csstools/postcss-color-function": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-3.0.7.tgz",
+      "integrity": "sha512-/PIB20G1TPCXmQlaJLWIYzTZRZpj6csT4ijgnshIj/kcmniIRroAfDa0xSWnfuO1eNo0NptIaPU7jzUukWn55Q==",
+      "requires": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2"
+      }
+    },
+    "@csstools/postcss-color-mix-function": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-2.0.7.tgz",
+      "integrity": "sha512-57/g8aGo5eKFjEeJMiRKh8Qq43K2rCyk5ZZTvJ34TNl4zUtYU5DvLkIkOnhCtL8/a4z9oMA42aOnFPddRrScUQ==",
+      "requires": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2"
+      }
+    },
+    "@csstools/postcss-exponential-functions": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-exponential-functions/-/postcss-exponential-functions-1.0.1.tgz",
+      "integrity": "sha512-ZLK2iSK4DUxeypGce2PnQSdYugUqDTwxnhNiq1o6OyKMNYgYs4eKbvEhFG8JKr1sJWbeqBi5jRr0017l2EWVvg==",
+      "requires": {
+        "@csstools/css-calc": "^1.1.4",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      }
+    },
+    "@csstools/postcss-font-format-keywords": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-3.0.0.tgz",
+      "integrity": "sha512-ntkGj+1uDa/u6lpjPxnkPcjJn7ChO/Kcy08YxctOZI7vwtrdYvFhmE476dq8bj1yna306+jQ9gzXIG/SWfOaRg==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-gamut-mapping": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-gamut-mapping/-/postcss-gamut-mapping-1.0.0.tgz",
+      "integrity": "sha512-6UQyK8l9YaG5Ao5rBDcCnKHrLsHiQ1E0zeFQuqDJqEtinVzAPb/MwSw3TenZXL1Rnd7th3tb+4CBFHBXdW5tbQ==",
+      "requires": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      }
+    },
+    "@csstools/postcss-gradients-interpolation-method": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-4.0.7.tgz",
+      "integrity": "sha512-GT1CzE/Tyr/ei4j5BwKESkHAgg+Gzys/0mAY7W+UiR+XrcYk5hDbOrE/YJIx1rflfO/7La1bDoZtA0YnLl4qNA==",
+      "requires": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2"
+      }
+    },
+    "@csstools/postcss-hwb-function": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-3.0.6.tgz",
+      "integrity": "sha512-uQgWt2Ho2yy2S6qthWY7mD5v57NKxi6dD1NB8nAybU5bJSsm+hLXRGm3/zbOH4xNrqO3Cl60DFSNlSrUME3Xjg==",
+      "requires": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      }
+    },
+    "@csstools/postcss-ic-unit": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-3.0.2.tgz",
+      "integrity": "sha512-n28Er7W9qc48zNjJnvTKuVHY26/+6YlA9WzJRksIHiAWOMxSH5IksXkw7FpkIOd+jLi59BMrX/BWrZMgjkLBHg==",
+      "requires": {
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-initial": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-initial/-/postcss-initial-1.0.0.tgz",
+      "integrity": "sha512-1l7iHHjIl5qmVeGItugr4ZOlCREDP71mNKqoEyxlosIoiu3Os1nPWMHpuCvDLCLiWI/ONTOg3nzJh7gwHOrqUA==",
+      "requires": {}
+    },
+    "@csstools/postcss-is-pseudo-class": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-4.0.3.tgz",
+      "integrity": "sha512-/dt5M9Ty/x3Yiq0Nm/5PJJzwkVFchJgdjKVnryBPtoMCb9ohb/nDIJOwr/Wr3hK3FDs1EA1GE6PyRYsUmQPS8Q==",
+      "requires": {
+        "@csstools/selector-specificity": "^3.0.0",
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "@csstools/postcss-logical-float-and-clear": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-float-and-clear/-/postcss-logical-float-and-clear-2.0.0.tgz",
+      "integrity": "sha512-Wki4vxsF6icRvRz8eF9bPpAvwaAt0RHwhVOyzfoFg52XiIMjb6jcbHkGxwpJXP4DVrnFEwpwmrz5aTRqOW82kg==",
+      "requires": {}
+    },
+    "@csstools/postcss-logical-overflow": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overflow/-/postcss-logical-overflow-1.0.0.tgz",
+      "integrity": "sha512-cIrZ8f7bGGvr+W53nEuMspcwaeaI2YTmz6LZ4yiAO5z14/PQgOOv+Pn+qjvPOPoadeY2BmpaoTzZKvdAQuM17w==",
+      "requires": {}
+    },
+    "@csstools/postcss-logical-overscroll-behavior": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overscroll-behavior/-/postcss-logical-overscroll-behavior-1.0.0.tgz",
+      "integrity": "sha512-e89S2LWjnxf0SB2wNUAbqDyFb/Fow/tlOe1XqOLbNx4rf3LrQokM9qldVx7sarnddml3ORE5LDUmlKpPOOeJTA==",
+      "requires": {}
+    },
+    "@csstools/postcss-logical-resize": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-resize/-/postcss-logical-resize-2.0.0.tgz",
+      "integrity": "sha512-lCQ1aX8c5+WI4t5EoYf3alTzJNNocMqTb+u1J9CINdDhFh1fjovqK+0aHalUHsNstZmzFPNzIkU4Mb3eM9U8SA==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-logical-viewport-units": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-2.0.3.tgz",
+      "integrity": "sha512-xeVxqND5rlQyqLGdH7rX34sIm/JbbQKxpKQP8oD1YQqUHHCLQR9NUS57WqJKajxKN6AcNAMWJhb5LUH5RfPcyA==",
+      "requires": {
+        "@csstools/css-tokenizer": "^2.2.1"
+      }
+    },
+    "@csstools/postcss-media-minmax": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-1.1.0.tgz",
+      "integrity": "sha512-t5Li/DPC5QmW/6VFLfUvsw/4dNYYseWR0tOXDeJg/9EKUodBgNawz5tuk5vYKtNvoj+Q08odMuXcpS5YJj0AFA==",
+      "requires": {
+        "@csstools/css-calc": "^1.1.4",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/media-query-list-parser": "^2.1.5"
+      }
+    },
+    "@csstools/postcss-media-queries-aspect-ratio-number-values": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-2.0.3.tgz",
+      "integrity": "sha512-IPL8AvnwMYW+cWtp+j8cW3MFN0RyXNT4hLOvs6Rf2N+NcbvXhSyKxZuE3W9Cv4KjaNoNoGx1d0UhT6tktq6tUw==",
+      "requires": {
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/media-query-list-parser": "^2.1.5"
+      }
+    },
+    "@csstools/postcss-nested-calc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-3.0.0.tgz",
+      "integrity": "sha512-HsB66aDWAouOwD/GcfDTS0a7wCuVWaTpXcjl5VKP0XvFxDiU+r0T8FG7xgb6ovZNZ+qzvGIwRM+CLHhDgXrYgQ==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-normalize-display-values": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-3.0.1.tgz",
+      "integrity": "sha512-nUvRxI+ALJwkxZdPU4EDyuM380vP91sAGvI3jAOHs/sr3jfcCOzLkY6xKI1Mr526kZ3RivmMoYM/xq+XFyE/bw==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-oklab-function": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-3.0.7.tgz",
+      "integrity": "sha512-vBFTQD3CARB3u/XIGO44wWbcO7xG/4GsYqJlcPuUGRSK8mtxes6n4vvNFlIByyAZy2k4d4RY63nyvTbMpeNTaQ==",
+      "requires": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2"
+      }
+    },
+    "@csstools/postcss-progressive-custom-properties": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-3.0.2.tgz",
+      "integrity": "sha512-YEvTozk1SxnV/PGL5DllBVDuLQ+jiQhyCSQiZJ6CwBMU5JQ9hFde3i1qqzZHuclZfptjrU0JjlX4ePsOhxNzHw==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-relative-color-syntax": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-2.0.7.tgz",
+      "integrity": "sha512-2AiFbJSVF4EyymLxme4JzSrbXykHolx8DdZECHjYKMhoulhKLltx5ccYgtrK3BmXGd3v3nJrWFCc8JM8bjuiOg==",
+      "requires": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2"
+      }
+    },
+    "@csstools/postcss-scope-pseudo-class": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-3.0.0.tgz",
+      "integrity": "sha512-GFNVsD97OuEcfHmcT0/DAZWAvTM/FFBDQndIOLawNc1Wq8YqpZwBdHa063Lq+Irk7azygTT+Iinyg3Lt76p7rg==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "@csstools/postcss-stepped-value-functions": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-3.0.2.tgz",
+      "integrity": "sha512-I3wX44MZVv+tDuWfrd3BTvRB/YRIM2F5v1MBtTI89sxpFn47mNpTwpPYUOGPVCgKlRDfZSlxIUYhUQmqRQZZFQ==",
+      "requires": {
+        "@csstools/css-calc": "^1.1.4",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      }
+    },
+    "@csstools/postcss-text-decoration-shorthand": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-3.0.3.tgz",
+      "integrity": "sha512-d5J9m49HhqXRcw1S6vTZuviHi/iknUKGjBpChiNK1ARg9sSa3b8m5lsWz5Izs8ISORZdv2bZRwbw5Z2R6gQ9kQ==",
+      "requires": {
+        "@csstools/color-helpers": "^3.0.2",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "@csstools/postcss-trigonometric-functions": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-3.0.2.tgz",
+      "integrity": "sha512-AwzNhF4QOKaLOKvMljwwFkeYXwufhRO15G+kKohHkyoNOL75xWkN+W2Y9ik9tSeAyDv+cYNlYaF+o/a79WjVjg==",
+      "requires": {
+        "@csstools/css-calc": "^1.1.4",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1"
+      }
+    },
+    "@csstools/postcss-unset-value": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-3.0.0.tgz",
+      "integrity": "sha512-P0JD1WHh3avVyKKRKjd0dZIjCEeaBer8t1BbwGMUDtSZaLhXlLNBqZ8KkqHzYWXOJgHleXAny2/sx8LYl6qhEA==",
+      "requires": {}
+    },
+    "@csstools/selector-specificity": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz",
+      "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==",
+      "requires": {}
+    },
+    "@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true
+    },
+    "@hapi/hoek": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
+      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==",
+      "dev": true
+    },
+    "@hapi/topo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/@hapi/topo/-/topo-5.1.0.tgz",
+      "integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
+      "dev": true,
+      "requires": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+      "dev": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.20",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
+      "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "@leichtgewicht/ip-codec": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
+      "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
+      "dev": true
+    },
+    "@node-ipc/js-queue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/@node-ipc/js-queue/-/js-queue-2.0.3.tgz",
+      "integrity": "sha512-fL1wpr8hhD5gT2dA1qifeVaoDFlQR5es8tFuKqjHX+kdOtdNHnxkVZbtIrR2rxnMFvehkjaZRNV2H/gPXlb0hw==",
+      "dev": true,
+      "requires": {
+        "easy-stack": "1.0.1"
+      }
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmmirror.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@polka/url": {
+      "version": "1.0.0-next.23",
+      "resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.23.tgz",
+      "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==",
+      "dev": true
+    },
+    "@rollup/plugin-babel": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
+      "integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.10.4",
+        "@rollup/pluginutils": "^3.1.0"
+      }
+    },
+    "@rollup/plugin-node-resolve": {
+      "version": "11.2.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
+      "integrity": "sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
+        "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.19.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.3.1.tgz",
+          "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+          "dev": true
+        }
+      }
+    },
+    "@rollup/plugin-replace": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz",
+      "integrity": "sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "dependencies": {
+        "@types/estree": {
+          "version": "0.0.39",
+          "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-0.0.39.tgz",
+          "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+          "dev": true
+        }
+      }
+    },
+    "@sideway/address": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
+      "integrity": "sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==",
+      "dev": true,
+      "requires": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "@sideway/formula": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/@sideway/formula/-/formula-3.0.1.tgz",
+      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==",
+      "dev": true
+    },
+    "@sideway/pinpoint": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
+      "dev": true
+    },
+    "@soda/friendly-errors-webpack-plugin": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
+      "integrity": "sha512-h2ooWqP8XuFqTXT+NyAFbrArzfQA7R6HTezADrvD9Re8fxMLTPPniLdqVTdDaO0eIoLaAwKT+d6w+5GeTk7Vbg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^3.0.0",
+        "error-stack-parser": "^2.0.6",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@soda/get-current-script": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz",
+      "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
+      "dev": true
+    },
+    "@surma/rollup-plugin-off-main-thread": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
+      "integrity": "sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==",
+      "dev": true,
+      "requires": {
+        "ejs": "^3.1.6",
+        "json5": "^2.2.0",
+        "magic-string": "^0.25.0",
+        "string.prototype.matchall": "^4.0.6"
+      }
+    },
+    "@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true
+    },
+    "@types/body-parser": {
+      "version": "1.19.5",
+      "resolved": "https://registry.npmmirror.com/@types/body-parser/-/body-parser-1.19.5.tgz",
+      "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==",
+      "dev": true,
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/bonjour": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmmirror.com/@types/bonjour/-/bonjour-3.5.13.tgz",
+      "integrity": "sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/connect": {
+      "version": "3.4.38",
+      "resolved": "https://registry.npmmirror.com/@types/connect/-/connect-3.4.38.tgz",
+      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/connect-history-api-fallback": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmmirror.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz",
+      "integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==",
+      "dev": true,
+      "requires": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/eslint": {
+      "version": "8.44.7",
+      "resolved": "https://registry.npmmirror.com/@types/eslint/-/eslint-8.44.7.tgz",
+      "integrity": "sha512-f5ORu2hcBbKei97U73mf+l9t4zTGl74IqZ0GQk4oVea/VS8tQZYkUveSYojk+frraAVYId0V2WC9O4PTNru2FQ==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "@types/eslint-scope": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmmirror.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
+      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
+      "dev": true,
+      "requires": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
+    "@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
+    },
+    "@types/express": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/@types/express/-/express-4.17.21.tgz",
+      "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
+      "dev": true,
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.33",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.17.41",
+      "resolved": "https://registry.npmmirror.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.41.tgz",
+      "integrity": "sha512-OaJ7XLaelTgrvlZD8/aa0vvvxZdUmlCn6MtWeB7TkiKW70BQLc9XEPpDLPdbo52ZhXUCrznlWdCHWxJWtdyajA==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      }
+    },
+    "@types/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
+      "dev": true
+    },
+    "@types/http-errors": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/@types/http-errors/-/http-errors-2.0.4.tgz",
+      "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==",
+      "dev": true
+    },
+    "@types/http-proxy": {
+      "version": "1.17.14",
+      "resolved": "https://registry.npmmirror.com/@types/http-proxy/-/http-proxy-1.17.14.tgz",
+      "integrity": "sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true
+    },
+    "@types/mime": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmmirror.com/@types/mime/-/mime-1.3.5.tgz",
+      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
+      "dev": true
+    },
+    "@types/minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmmirror.com/@types/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "20.10.0",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.10.0.tgz",
+      "integrity": "sha512-D0WfRmU9TQ8I9PFx9Yc+EBHw+vSpIub4IDvQivcp26PtPrdMGAq5SDcpXEo/epqa/DXotVpekHiLNTg3iaKXBQ==",
+      "dev": true,
+      "requires": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "@types/node-forge": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmmirror.com/@types/node-forge/-/node-forge-1.3.10.tgz",
+      "integrity": "sha512-y6PJDYN4xYBxwd22l+OVH35N+1fCYWiuC3aiP2SlXVE6Lo7SS+rSx9r89hLxrP4pn6n1lBGhHJ12pj3F3Mpttw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/normalize-package-data": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz",
+      "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
+      "dev": true
+    },
+    "@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "dev": true
+    },
+    "@types/qs": {
+      "version": "6.9.10",
+      "resolved": "https://registry.npmmirror.com/@types/qs/-/qs-6.9.10.tgz",
+      "integrity": "sha512-3Gnx08Ns1sEoCrWssEgTSJs/rsT2vhGP+Ja9cnnk9k4ALxinORlQneLXFeFKOTJMOeZUFD1s7w+w2AphTpvzZw==",
+      "dev": true
+    },
+    "@types/range-parser": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmmirror.com/@types/range-parser/-/range-parser-1.2.7.tgz",
+      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
+      "dev": true
+    },
+    "@types/resolve": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmmirror.com/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmmirror.com/@types/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
+      "dev": true
+    },
+    "@types/send": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmmirror.com/@types/send/-/send-0.17.4.tgz",
+      "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==",
+      "dev": true,
+      "requires": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "@types/serve-index": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmmirror.com/@types/serve-index/-/serve-index-1.9.4.tgz",
+      "integrity": "sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==",
+      "dev": true,
+      "requires": {
+        "@types/express": "*"
+      }
+    },
+    "@types/serve-static": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmmirror.com/@types/serve-static/-/serve-static-1.15.5.tgz",
+      "integrity": "sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==",
+      "dev": true,
+      "requires": {
+        "@types/http-errors": "*",
+        "@types/mime": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/sockjs": {
+      "version": "0.3.36",
+      "resolved": "https://registry.npmmirror.com/@types/sockjs/-/sockjs-0.3.36.tgz",
+      "integrity": "sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true
+    },
+    "@types/ws": {
+      "version": "8.5.10",
+      "resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.10.tgz",
+      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@vant/touch-emulator": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vant/touch-emulator/-/touch-emulator-1.4.0.tgz",
+      "integrity": "sha512-Zt+zISV0+wpOew2S1siOJ3G22y+hapHAKmXM+FhpvWzsRc4qahaYXatCAITuuXt0EcDp7WvEeTO4F7p9AtX/pw=="
+    },
+    "@vue/babel-helper-vue-jsx-merge-props": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
+      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==",
+      "dev": true
+    },
+    "@vue/babel-helper-vue-transform-on": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.1.5.tgz",
+      "integrity": "sha512-SgUymFpMoAyWeYWLAY+MkCK3QEROsiUnfaw5zxOVD/M64KQs8D/4oK6Q5omVA2hnvEOE0SCkH2TZxs/jnnUj7w==",
+      "dev": true
+    },
+    "@vue/babel-plugin-jsx": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.5.tgz",
+      "integrity": "sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.22.5",
+        "@babel/template": "^7.22.5",
+        "@babel/traverse": "^7.22.5",
+        "@babel/types": "^7.22.5",
+        "@vue/babel-helper-vue-transform-on": "^1.1.5",
+        "camelcase": "^6.3.0",
+        "html-tags": "^3.3.1",
+        "svg-tags": "^1.0.0"
+      }
+    },
+    "@vue/babel-plugin-transform-vue-jsx": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.4.0.tgz",
+      "integrity": "sha512-Fmastxw4MMx0vlgLS4XBX0XiBbUFzoMGeVXuMV08wyOfXdikAFqBTuYPR0tlk+XskL19EzHc39SgjrPGY23JnA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/plugin-syntax-jsx": "^7.2.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+        "html-tags": "^2.0.0",
+        "lodash.kebabcase": "^4.1.1",
+        "svg-tags": "^1.0.0"
+      },
+      "dependencies": {
+        "html-tags": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/html-tags/-/html-tags-2.0.0.tgz",
+          "integrity": "sha512-+Il6N8cCo2wB/Vd3gqy/8TZhTD3QvcVeQLCnZiGkGCH3JP28IgGAY41giccp2W4R3jfyJPAP318FQTa1yU7K7g==",
+          "dev": true
+        }
+      }
+    },
+    "@vue/babel-preset-app": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-preset-app/-/babel-preset-app-5.0.8.tgz",
+      "integrity": "sha512-yl+5qhpjd8e1G4cMXfORkkBlvtPCIgmRf3IYCWYDKIQ7m+PPa5iTm4feiNmCMD6yGqQWMhhK/7M3oWGL9boKwg==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.12.16",
+        "@babel/helper-compilation-targets": "^7.12.16",
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-proposal-class-properties": "^7.12.13",
+        "@babel/plugin-proposal-decorators": "^7.12.13",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/plugin-transform-runtime": "^7.12.15",
+        "@babel/preset-env": "^7.12.16",
+        "@babel/runtime": "^7.12.13",
+        "@vue/babel-plugin-jsx": "^1.0.3",
+        "@vue/babel-preset-jsx": "^1.1.2",
+        "babel-plugin-dynamic-import-node": "^2.3.3",
+        "core-js": "^3.8.3",
+        "core-js-compat": "^3.8.3",
+        "semver": "^7.3.4"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
+    },
+    "@vue/babel-preset-jsx": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.4.0.tgz",
+      "integrity": "sha512-QmfRpssBOPZWL5xw7fOuHNifCQcNQC1PrOo/4fu6xlhlKJJKSA3HqX92Nvgyx8fqHZTUGMPHmFA+IDqwXlqkSA==",
+      "dev": true,
+      "requires": {
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+        "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
+        "@vue/babel-sugar-composition-api-inject-h": "^1.4.0",
+        "@vue/babel-sugar-composition-api-render-instance": "^1.4.0",
+        "@vue/babel-sugar-functional-vue": "^1.4.0",
+        "@vue/babel-sugar-inject-h": "^1.4.0",
+        "@vue/babel-sugar-v-model": "^1.4.0",
+        "@vue/babel-sugar-v-on": "^1.4.0"
+      }
+    },
+    "@vue/babel-sugar-composition-api-inject-h": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-sugar-composition-api-inject-h/-/babel-sugar-composition-api-inject-h-1.4.0.tgz",
+      "integrity": "sha512-VQq6zEddJHctnG4w3TfmlVp5FzDavUSut/DwR0xVoe/mJKXyMcsIibL42wPntozITEoY90aBV0/1d2KjxHU52g==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-syntax-jsx": "^7.2.0"
+      }
+    },
+    "@vue/babel-sugar-composition-api-render-instance": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-sugar-composition-api-render-instance/-/babel-sugar-composition-api-render-instance-1.4.0.tgz",
+      "integrity": "sha512-6ZDAzcxvy7VcnCjNdHJ59mwK02ZFuP5CnucloidqlZwVQv5CQLijc3lGpR7MD3TWFi78J7+a8J56YxbCtHgT9Q==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-syntax-jsx": "^7.2.0"
+      }
+    },
+    "@vue/babel-sugar-functional-vue": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.4.0.tgz",
+      "integrity": "sha512-lTEB4WUFNzYt2In6JsoF9sAYVTo84wC4e+PoZWSgM6FUtqRJz7wMylaEhSRgG71YF+wfLD6cc9nqVeXN2rwBvw==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-syntax-jsx": "^7.2.0"
+      }
+    },
+    "@vue/babel-sugar-inject-h": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.4.0.tgz",
+      "integrity": "sha512-muwWrPKli77uO2fFM7eA3G1lAGnERuSz2NgAxuOLzrsTlQl8W4G+wwbM4nB6iewlKbwKRae3nL03UaF5ffAPMA==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-syntax-jsx": "^7.2.0"
+      }
+    },
+    "@vue/babel-sugar-v-model": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.4.0.tgz",
+      "integrity": "sha512-0t4HGgXb7WHYLBciZzN5s0Hzqan4Ue+p/3FdQdcaHAb7s5D9WZFGoSxEZHrR1TFVZlAPu1bejTKGeAzaaG3NCQ==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-syntax-jsx": "^7.2.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+        "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
+        "camelcase": "^5.0.0",
+        "html-tags": "^2.0.0",
+        "svg-tags": "^1.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "dev": true
+        },
+        "html-tags": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/html-tags/-/html-tags-2.0.0.tgz",
+          "integrity": "sha512-+Il6N8cCo2wB/Vd3gqy/8TZhTD3QvcVeQLCnZiGkGCH3JP28IgGAY41giccp2W4R3jfyJPAP318FQTa1yU7K7g==",
+          "dev": true
+        }
+      }
+    },
+    "@vue/babel-sugar-v-on": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.4.0.tgz",
+      "integrity": "sha512-m+zud4wKLzSKgQrWwhqRObWzmTuyzl6vOP7024lrpeJM4x2UhQtRDLgYjXAw9xBXjCwS0pP9kXjg91F9ZNo9JA==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-syntax-jsx": "^7.2.0",
+        "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
+        "camelcase": "^5.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "dev": true
+        }
+      }
+    },
+    "@vue/cli-overlay": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-overlay/-/cli-overlay-5.0.8.tgz",
+      "integrity": "sha512-KmtievE/B4kcXp6SuM2gzsnSd8WebkQpg3XaB6GmFh1BJGRqa1UiW9up7L/Q67uOdTigHxr5Ar2lZms4RcDjwQ==",
+      "dev": true
+    },
+    "@vue/cli-plugin-babel": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-babel/-/cli-plugin-babel-5.0.8.tgz",
+      "integrity": "sha512-a4qqkml3FAJ3auqB2kN2EMPocb/iu0ykeELwed+9B1c1nQ1HKgslKMHMPavYx3Cd/QAx2mBD4hwKBqZXEI/CsQ==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.12.16",
+        "@vue/babel-preset-app": "^5.0.8",
+        "@vue/cli-shared-utils": "^5.0.8",
+        "babel-loader": "^8.2.2",
+        "thread-loader": "^3.0.0",
+        "webpack": "^5.54.0"
+      }
+    },
+    "@vue/cli-plugin-pwa": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-pwa/-/cli-plugin-pwa-5.0.8.tgz",
+      "integrity": "sha512-MnD9Y6I3nX7c/NawpsJtbXaGFjI9LT5Az7IQjpshS65+yvuOcxV2j/tCjPTrja+zd1VmB4DZUhrfUU2exSBfGg==",
+      "dev": true,
+      "requires": {
+        "@vue/cli-shared-utils": "^5.0.8",
+        "html-webpack-plugin": "^5.1.0",
+        "webpack": "^5.54.0",
+        "workbox-webpack-plugin": "^6.1.0"
+      }
+    },
+    "@vue/cli-plugin-router": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-router/-/cli-plugin-router-5.0.8.tgz",
+      "integrity": "sha512-Gmv4dsGdAsWPqVijz3Ux2OS2HkMrWi1ENj2cYL75nUeL+Xj5HEstSqdtfZ0b1q9NCce+BFB6QnHfTBXc/fCvMg==",
+      "dev": true,
+      "requires": {
+        "@vue/cli-shared-utils": "^5.0.8"
+      }
+    },
+    "@vue/cli-plugin-vuex": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
+      "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
+      "dev": true,
+      "requires": {}
+    },
+    "@vue/cli-service": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-service/-/cli-service-5.0.8.tgz",
+      "integrity": "sha512-nV7tYQLe7YsTtzFrfOMIHc5N2hp5lHG2rpYr0aNja9rNljdgcPZLyQRb2YRivTHqTv7lI962UXFURcpStHgyFw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-compilation-targets": "^7.12.16",
+        "@soda/friendly-errors-webpack-plugin": "^1.8.0",
+        "@soda/get-current-script": "^1.0.2",
+        "@types/minimist": "^1.2.0",
+        "@vue/cli-overlay": "^5.0.8",
+        "@vue/cli-plugin-router": "^5.0.8",
+        "@vue/cli-plugin-vuex": "^5.0.8",
+        "@vue/cli-shared-utils": "^5.0.8",
+        "@vue/component-compiler-utils": "^3.3.0",
+        "@vue/vue-loader-v15": "npm:vue-loader@^15.9.7",
+        "@vue/web-component-wrapper": "^1.3.0",
+        "acorn": "^8.0.5",
+        "acorn-walk": "^8.0.2",
+        "address": "^1.1.2",
+        "autoprefixer": "^10.2.4",
+        "browserslist": "^4.16.3",
+        "case-sensitive-paths-webpack-plugin": "^2.3.0",
+        "cli-highlight": "^2.1.10",
+        "clipboardy": "^2.3.0",
+        "cliui": "^7.0.4",
+        "copy-webpack-plugin": "^9.0.1",
+        "css-loader": "^6.5.0",
+        "css-minimizer-webpack-plugin": "^3.0.2",
+        "cssnano": "^5.0.0",
+        "debug": "^4.1.1",
+        "default-gateway": "^6.0.3",
+        "dotenv": "^10.0.0",
+        "dotenv-expand": "^5.1.0",
+        "fs-extra": "^9.1.0",
+        "globby": "^11.0.2",
+        "hash-sum": "^2.0.0",
+        "html-webpack-plugin": "^5.1.0",
+        "is-file-esm": "^1.0.0",
+        "launch-editor-middleware": "^2.2.1",
+        "lodash.defaultsdeep": "^4.6.1",
+        "lodash.mapvalues": "^4.6.0",
+        "mini-css-extract-plugin": "^2.5.3",
+        "minimist": "^1.2.5",
+        "module-alias": "^2.2.2",
+        "portfinder": "^1.0.26",
+        "postcss": "^8.2.6",
+        "postcss-loader": "^6.1.1",
+        "progress-webpack-plugin": "^1.0.12",
+        "ssri": "^8.0.1",
+        "terser-webpack-plugin": "^5.1.1",
+        "thread-loader": "^3.0.0",
+        "vue-loader": "^17.0.0",
+        "vue-style-loader": "^4.1.3",
+        "webpack": "^5.54.0",
+        "webpack-bundle-analyzer": "^4.4.0",
+        "webpack-chain": "^6.5.1",
+        "webpack-dev-server": "^4.7.3",
+        "webpack-merge": "^5.7.3",
+        "webpack-virtual-modules": "^0.4.2",
+        "whatwg-fetch": "^3.6.2"
+      }
+    },
+    "@vue/cli-shared-utils": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue/cli-shared-utils/-/cli-shared-utils-5.0.8.tgz",
+      "integrity": "sha512-uK2YB7bBVuQhjOJF+O52P9yFMXeJVj7ozqJkwYE9PlMHL1LMHjtCYm4cSdOebuPzyP+/9p0BimM/OqxsevIopQ==",
+      "dev": true,
+      "requires": {
+        "@achrinza/node-ipc": "^9.2.5",
+        "chalk": "^4.1.2",
+        "execa": "^1.0.0",
+        "joi": "^17.4.0",
+        "launch-editor": "^2.2.1",
+        "lru-cache": "^6.0.0",
+        "node-fetch": "^2.6.7",
+        "open": "^8.0.2",
+        "ora": "^5.3.0",
+        "read-pkg": "^5.1.1",
+        "semver": "^7.3.4",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
+    },
+    "@vue/compiler-sfc": {
+      "version": "2.7.15",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.15.tgz",
+      "integrity": "sha512-FCvIEevPmgCgqFBH7wD+3B97y7u7oj/Wr69zADBf403Tui377bThTjBvekaZvlRr4IwUAu3M6hYZeULZFJbdYg==",
+      "requires": {
+        "@babel/parser": "^7.18.4",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "@vue/component-compiler-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
+      "integrity": "sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==",
+      "dev": true,
+      "requires": {
+        "consolidate": "^0.15.1",
+        "hash-sum": "^1.0.2",
+        "lru-cache": "^4.1.2",
+        "merge-source-map": "^1.1.0",
+        "postcss": "^7.0.36",
+        "postcss-selector-parser": "^6.0.2",
+        "prettier": "^1.18.2 || ^2.0.0",
+        "source-map": "~0.6.1",
+        "vue-template-es2015-compiler": "^1.9.0"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+          "dev": true
+        },
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "dev": true,
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
+          "dev": true
+        }
+      }
+    },
+    "@vue/vue-loader-v15": {
+      "version": "npm:vue-loader@15.11.1",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.11.1.tgz",
+      "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
+      "dev": true,
+      "requires": {
+        "@vue/component-compiler-utils": "^3.1.0",
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.1.0",
+        "vue-hot-reload-api": "^2.3.0",
+        "vue-style-loader": "^4.1.0"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+          "dev": true
+        }
+      }
+    },
+    "@vue/web-component-wrapper": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
+      "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
+      "dev": true
+    },
+    "@webassemblyjs/ast": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.11.6.tgz",
+      "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/helper-numbers": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
+      }
+    },
+    "@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-api-error": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-buffer": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
+      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-numbers": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
+      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-wasm-section": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
+      "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6"
+      }
+    },
+    "@webassemblyjs/ieee754": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
+      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
+      "dev": true,
+      "requires": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "@webassemblyjs/leb128": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
+      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
+      "dev": true,
+      "requires": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/utf8": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
+      "dev": true
+    },
+    "@webassemblyjs/wasm-edit": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
+      "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/helper-wasm-section": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-opt": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6",
+        "@webassemblyjs/wast-printer": "1.11.6"
+      }
+    },
+    "@webassemblyjs/wasm-gen": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
+      "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "@webassemblyjs/wasm-opt": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
+      "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6"
+      }
+    },
+    "@webassemblyjs/wasm-parser": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
+      "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "@webassemblyjs/wast-printer": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmmirror.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
+      "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true
+    },
+    "@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true
+    },
+    "accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmmirror.com/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dev": true,
+      "requires": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      }
+    },
+    "acorn": {
+      "version": "8.11.2",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.11.2.tgz",
+      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
+      "dev": true
+    },
+    "acorn-import-assertions": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmmirror.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
+      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+      "dev": true,
+      "requires": {}
+    },
+    "acorn-walk": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmmirror.com/acorn-walk/-/acorn-walk-8.3.0.tgz",
+      "integrity": "sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==",
+      "dev": true
+    },
+    "address": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/address/-/address-1.2.2.tgz",
+      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
+      "dev": true
+    },
+    "ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "requires": {
+        "ajv": "^8.0.0"
+      }
+    },
+    "amfe-flexible": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
+      "integrity": "sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw=="
+    },
+    "ansi-escapes": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+      "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
+      "dev": true
+    },
+    "ansi-html-community": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmmirror.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
+      "dev": true
+    },
+    "ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
+    "anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "arch": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/arch/-/arch-2.2.0.tgz",
+      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
+      "dev": true
+    },
+    "array-buffer-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
+      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "is-array-buffer": "^3.0.1"
+      }
+    },
+    "array-flatten": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/array-flatten/-/array-flatten-2.1.2.tgz",
+      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
+      "dev": true
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
+    "arraybuffer.prototype.slice": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz",
+      "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==",
+      "dev": true,
+      "requires": {
+        "array-buffer-byte-length": "^1.0.0",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
+        "is-array-buffer": "^3.0.2",
+        "is-shared-array-buffer": "^1.0.2"
+      }
+    },
+    "async": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmmirror.com/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.14"
+      }
+    },
+    "at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true
+    },
+    "autoprefixer": {
+      "version": "10.4.16",
+      "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.16.tgz",
+      "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
+      "requires": {
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001538",
+        "fraction.js": "^4.3.6",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true
+    },
+    "babel-loader": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.3.0.tgz",
+      "integrity": "sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==",
+      "dev": true,
+      "requires": {
+        "find-cache-dir": "^3.3.1",
+        "loader-utils": "^2.0.0",
+        "make-dir": "^3.1.0",
+        "schema-utils": "^2.6.5"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
+    "babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "dev": true,
+      "requires": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "babel-plugin-polyfill-corejs2": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.6.tgz",
+      "integrity": "sha512-jhHiWVZIlnPbEUKSSNb9YoWcQGdlTLq7z1GHL4AjFxaoOUMuuEVJ+Y4pAaQUGOGk93YsVCKPbqbfw3m0SM6H8Q==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.22.6",
+        "@babel/helper-define-polyfill-provider": "^0.4.3",
+        "semver": "^6.3.1"
+      }
+    },
+    "babel-plugin-polyfill-corejs3": {
+      "version": "0.8.6",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.6.tgz",
+      "integrity": "sha512-leDIc4l4tUgU7str5BWLS2h8q2N4Nf6lGZP6UrNDxdtfF2g69eJ5L0H7S8A5Ln/arfFAfHor5InAdZuIOwZdgQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.4.3",
+        "core-js-compat": "^3.33.1"
+      }
+    },
+    "babel-plugin-polyfill-regenerator": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.3.tgz",
+      "integrity": "sha512-8sHeDOmXC8csczMrYEOf0UTNa4yE2SxV5JGeT/LP1n0OYVDUUFPxG9vdk2AlDlIit4t+Kf0xCtpgXPBwnn/9pw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.4.3"
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true
+    },
+    "batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
+      "dev": true
+    },
+    "big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
+    "bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "requires": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmmirror.com/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true
+    },
+    "body-parser": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "dev": true,
+      "requires": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmmirror.com/bytes/-/bytes-3.1.2.tgz",
+          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+          "dev": true
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        }
+      }
+    },
+    "bonjour-service": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/bonjour-service/-/bonjour-service-1.1.1.tgz",
+      "integrity": "sha512-Z/5lQRMOG9k7W+FkeGTNjh7htqn/2LMnfOvBZ8pynNZCM9MwkQkI3zeI4oz09uWdcgmgHugVvBqxGg4VQJ5PCg==",
+      "dev": true,
+      "requires": {
+        "array-flatten": "^2.1.2",
+        "dns-equal": "^1.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "multicast-dns": "^7.2.5"
+      }
+    },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "browserslist": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.22.1.tgz",
+      "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
+      "requires": {
+        "caniuse-lite": "^1.0.30001541",
+        "electron-to-chromium": "^1.4.535",
+        "node-releases": "^2.0.13",
+        "update-browserslist-db": "^1.0.13"
+      }
+    },
+    "buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmmirror.com/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "requires": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
+    "builtin-modules": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/builtin-modules/-/builtin-modules-3.3.0.tgz",
+      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
+      "dev": true
+    },
+    "bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "dev": true
+    },
+    "call-bind": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.5.tgz",
+      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.1",
+        "set-function-length": "^1.1.1"
+      }
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
+    },
+    "camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dev": true,
+      "requires": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true
+    },
+    "caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001565",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz",
+      "integrity": "sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w=="
+    },
+    "case-sensitive-paths-webpack-plugin": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
+      "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
+    "chrome-trace-event": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "dev": true
+    },
+    "claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
+    "clean-css": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmmirror.com/clean-css/-/clean-css-5.3.2.tgz",
+      "integrity": "sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==",
+      "dev": true,
+      "requires": {
+        "source-map": "~0.6.0"
+      }
+    },
+    "cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "requires": {
+        "restore-cursor": "^3.1.0"
+      }
+    },
+    "cli-highlight": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmmirror.com/cli-highlight/-/cli-highlight-2.1.11.tgz",
+      "integrity": "sha512-9KDcoEVwyUXrjcJNvHD0NFc/hiwe/WPVYIleQh2O1N2Zro5gWJZ/K+3DGn8w8P/F6FxOgzyC5bxDyHIgCSPhGg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0",
+        "highlight.js": "^10.7.1",
+        "mz": "^2.4.0",
+        "parse5": "^5.1.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.0",
+        "yargs": "^16.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "cli-spinners": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmmirror.com/cli-spinners/-/cli-spinners-2.9.2.tgz",
+      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+      "dev": true
+    },
+    "clipboardy": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/clipboardy/-/clipboardy-2.3.0.tgz",
+      "integrity": "sha512-mKhiIL2DrQIsuXMgBgnfEHOZOryC7kY7YO//TN6c63wlEm3NG5tz+YgY5rVi29KCmq/QQjKYvM7a19+MDOTHOQ==",
+      "dev": true,
+      "requires": {
+        "arch": "^2.1.1",
+        "execa": "^1.0.0",
+        "is-wsl": "^2.1.1"
+      }
+    },
+    "cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmmirror.com/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "dev": true
+    },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-2.0.4.tgz",
+          "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+          "dev": true,
+          "requires": {
+            "isobject": "^3.0.1"
+          }
+        }
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmmirror.com/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true
+    },
+    "colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmmirror.com/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true
+    },
+    "commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "dev": true
+    },
+    "common-tags": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmmirror.com/common-tags/-/common-tags-1.8.2.tgz",
+      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+      "dev": true
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "dev": true
+    },
+    "compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmmirror.com/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "dev": true,
+      "requires": {
+        "mime-db": ">= 1.43.0 < 2"
+      }
+    },
+    "compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmmirror.com/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "dev": true,
+      "requires": {
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        }
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "connect-history-api-fallback": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
+      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
+      "dev": true
+    },
+    "consolidate": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmmirror.com/consolidate/-/consolidate-0.15.1.tgz",
+      "integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.1.1"
+      }
+    },
+    "content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmmirror.com/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.2.1"
+      }
+    },
+    "content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "dev": true
+    },
+    "convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true
+    },
+    "cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmmirror.com/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "dev": true
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "dev": true
+    },
+    "copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "requires": {
+        "is-what": "^3.14.1"
+      }
+    },
+    "copy-webpack-plugin": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmmirror.com/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz",
+      "integrity": "sha512-rxnR7PaGigJzhqETHGmAcxKnLZSR5u1Y3/bcIv/1FnqXedcL/E2ewK7ZCNrArJKCiSv8yVXhTqetJh8inDvfsA==",
+      "dev": true,
+      "requires": {
+        "fast-glob": "^3.2.7",
+        "glob-parent": "^6.0.1",
+        "globby": "^11.0.3",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^3.1.1",
+        "serialize-javascript": "^6.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true,
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
+          "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "core-js": {
+      "version": "3.33.3",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.33.3.tgz",
+      "integrity": "sha512-lo0kOocUlLKmm6kv/FswQL8zbkH7mVsLJ/FULClOhv8WRVmKLVcs6XPNQAzstfeJTCHMyButEwG+z1kHxHoDZw=="
+    },
+    "core-js-compat": {
+      "version": "3.33.3",
+      "resolved": "https://registry.npmmirror.com/core-js-compat/-/core-js-compat-3.33.3.tgz",
+      "integrity": "sha512-cNzGqFsh3Ot+529GIXacjTJ7kegdt5fPXxCBVS1G0iaZpuo/tBz399ymceLJveQhFFZ8qThHiP3fzuoQjKN2ow==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.22.1"
+      }
+    },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true
+    },
+    "cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dev": true,
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      }
+    },
+    "cross-spawn": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-6.0.5.tgz",
+      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "dev": true,
+      "requires": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+          "dev": true
+        }
+      }
+    },
+    "crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "dev": true
+    },
+    "css-blank-pseudo": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-6.0.0.tgz",
+      "integrity": "sha512-VbfLlOWO7sBHBTn6pwDQzc07Z0SDydgDBfNfCE0nvrehdBNv9RKsuupIRa/qal0+fBZhAALyQDPMKz5lnvcchw==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "css-declaration-sorter": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
+      "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
+      "dev": true,
+      "requires": {}
+    },
+    "css-has-pseudo": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-6.0.0.tgz",
+      "integrity": "sha512-X+r+JBuoO37FBOWVNhVJhxtSBUFHgHbrcc0CjFT28JEdOw1qaDwABv/uunyodUuSy2hMPe9j/HjssxSlvUmKjg==",
+      "requires": {
+        "@csstools/selector-specificity": "^3.0.0",
+        "postcss-selector-parser": "^6.0.13",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "css-loader": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.8.1.tgz",
+      "integrity": "sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.21",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.3",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.8"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
+    },
+    "css-minimizer-webpack-plugin": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmmirror.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz",
+      "integrity": "sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==",
+      "dev": true,
+      "requires": {
+        "cssnano": "^5.0.6",
+        "jest-worker": "^27.0.2",
+        "postcss": "^8.3.5",
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "schema-utils": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.2.0.tgz",
+          "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.9.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.1.0"
+          }
+        }
+      }
+    },
+    "css-prefers-color-scheme": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-9.0.0.tgz",
+      "integrity": "sha512-03QGAk/FXIRseDdLb7XAiu6gidQ0Nd8945xuM7VFVPpc6goJsG9uIO8xQjTxwbPdPIIV4o4AJoOJyt8gwDl67g==",
+      "requires": {}
+    },
+    "css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      }
+    },
+    "css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "dev": true
+    },
+    "cssdb": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.9.0.tgz",
+      "integrity": "sha512-WPMT9seTQq6fPAa1yN4zjgZZeoTriSN2LqW9C+otjar12DQIWA4LuSfFrvFJiKp4oD0xIk1vumDLw8K9ur4NBw=="
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
+    },
+    "cssnano": {
+      "version": "5.1.15",
+      "resolved": "https://registry.npmmirror.com/cssnano/-/cssnano-5.1.15.tgz",
+      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
+      "dev": true,
+      "requires": {
+        "cssnano-preset-default": "^5.2.14",
+        "lilconfig": "^2.0.3",
+        "yaml": "^1.10.2"
+      }
+    },
+    "cssnano-preset-default": {
+      "version": "5.2.14",
+      "resolved": "https://registry.npmmirror.com/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
+      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
+      "dev": true,
+      "requires": {
+        "css-declaration-sorter": "^6.3.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-calc": "^8.2.3",
+        "postcss-colormin": "^5.3.1",
+        "postcss-convert-values": "^5.1.3",
+        "postcss-discard-comments": "^5.1.2",
+        "postcss-discard-duplicates": "^5.1.0",
+        "postcss-discard-empty": "^5.1.1",
+        "postcss-discard-overridden": "^5.1.0",
+        "postcss-merge-longhand": "^5.1.7",
+        "postcss-merge-rules": "^5.1.4",
+        "postcss-minify-font-values": "^5.1.0",
+        "postcss-minify-gradients": "^5.1.1",
+        "postcss-minify-params": "^5.1.4",
+        "postcss-minify-selectors": "^5.2.1",
+        "postcss-normalize-charset": "^5.1.0",
+        "postcss-normalize-display-values": "^5.1.0",
+        "postcss-normalize-positions": "^5.1.1",
+        "postcss-normalize-repeat-style": "^5.1.1",
+        "postcss-normalize-string": "^5.1.0",
+        "postcss-normalize-timing-functions": "^5.1.0",
+        "postcss-normalize-unicode": "^5.1.1",
+        "postcss-normalize-url": "^5.1.0",
+        "postcss-normalize-whitespace": "^5.1.1",
+        "postcss-ordered-values": "^5.1.3",
+        "postcss-reduce-initial": "^5.1.2",
+        "postcss-reduce-transforms": "^5.1.0",
+        "postcss-svgo": "^5.1.0",
+        "postcss-unique-selectors": "^5.1.1"
+      }
+    },
+    "cssnano-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+      "dev": true,
+      "requires": {}
+    },
+    "csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dev": true,
+      "requires": {
+        "css-tree": "^1.1.2"
+      }
+    },
+    "csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
+    "de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true
+    },
+    "debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
+      "dev": true
+    },
+    "debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "deepmerge": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
+      "dev": true
+    },
+    "default-gateway": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/default-gateway/-/default-gateway-6.0.3.tgz",
+      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+      "dev": true,
+      "requires": {
+        "execa": "^5.0.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "execa": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz",
+          "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^7.0.3",
+            "get-stream": "^6.0.0",
+            "human-signals": "^2.1.0",
+            "is-stream": "^2.0.0",
+            "merge-stream": "^2.0.0",
+            "npm-run-path": "^4.0.1",
+            "onetime": "^5.1.2",
+            "signal-exit": "^3.0.3",
+            "strip-final-newline": "^2.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-6.0.1.tgz",
+          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+          "dev": true
+        },
+        "is-stream": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-2.0.1.tgz",
+          "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+          "dev": true
+        },
+        "npm-run-path": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz",
+          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.0.0"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmmirror.com/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmmirror.com/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
+    "defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dev": true,
+      "requires": {
+        "clone": "^1.0.2"
+      }
+    },
+    "define-data-property": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.1.tgz",
+      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      }
+    },
+    "define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true
+    },
+    "define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "requires": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "dev": true
+    },
+    "destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "dev": true
+    },
+    "detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "dev": true
+    },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "requires": {
+        "path-type": "^4.0.0"
+      }
+    },
+    "dns-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/dns-equal/-/dns-equal-1.0.0.tgz",
+      "integrity": "sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==",
+      "dev": true
+    },
+    "dns-packet": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmmirror.com/dns-packet/-/dns-packet-5.6.1.tgz",
+      "integrity": "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==",
+      "dev": true,
+      "requires": {
+        "@leichtgewicht/ip-codec": "^2.0.1"
+      }
+    },
+    "dom-converter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+      "dev": true,
+      "requires": {
+        "utila": "~0.4"
+      }
+    },
+    "dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true
+    },
+    "domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmmirror.com/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.2.0"
+      }
+    },
+    "domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmmirror.com/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dev": true,
+      "requires": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      }
+    },
+    "dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmmirror.com/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "dev": true
+    },
+    "dotenv-expand": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
+      "dev": true
+    },
+    "duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
+    },
+    "easy-stack": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/easy-stack/-/easy-stack-1.0.1.tgz",
+      "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
+      "dev": true
+    },
+    "echarts": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
+      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.4"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
+    "echarts-gl": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
+      "requires": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
+      }
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "dev": true
+    },
+    "ejs": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmmirror.com/ejs/-/ejs-3.1.9.tgz",
+      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
+      "dev": true,
+      "requires": {
+        "jake": "^10.8.5"
+      }
+    },
+    "electron-to-chromium": {
+      "version": "1.4.595",
+      "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.595.tgz",
+      "integrity": "sha512-+ozvXuamBhDOKvMNUQvecxfbyICmIAwS4GpLmR0bsiSBlGnLaOcs2Cj7J8XSbW+YEaN3Xl3ffgpm+srTUWFwFQ=="
+    },
+    "emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "dev": true
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmmirror.com/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "enhanced-resolve": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
+      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      }
+    },
+    "entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true
+    },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "error-stack-parser": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmmirror.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
+      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
+      "dev": true,
+      "requires": {
+        "stackframe": "^1.3.4"
+      }
+    },
+    "es-abstract": {
+      "version": "1.22.3",
+      "resolved": "https://registry.npmmirror.com/es-abstract/-/es-abstract-1.22.3.tgz",
+      "integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==",
+      "dev": true,
+      "requires": {
+        "array-buffer-byte-length": "^1.0.0",
+        "arraybuffer.prototype.slice": "^1.0.2",
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.5",
+        "es-set-tostringtag": "^2.0.1",
+        "es-to-primitive": "^1.2.1",
+        "function.prototype.name": "^1.1.6",
+        "get-intrinsic": "^1.2.2",
+        "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0",
+        "internal-slot": "^1.0.5",
+        "is-array-buffer": "^3.0.2",
+        "is-callable": "^1.2.7",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.12",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.13.1",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.5.1",
+        "safe-array-concat": "^1.0.1",
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trim": "^1.2.8",
+        "string.prototype.trimend": "^1.0.7",
+        "string.prototype.trimstart": "^1.0.7",
+        "typed-array-buffer": "^1.0.0",
+        "typed-array-byte-length": "^1.0.0",
+        "typed-array-byte-offset": "^1.0.0",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.13"
+      }
+    },
+    "es-module-lexer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+      "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
+      "dev": true
+    },
+    "es-set-tostringtag": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
+      "integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.2.2",
+        "has-tostringtag": "^1.0.0",
+        "hasown": "^2.0.0"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true
+    },
+    "eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.2.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmmirror.com/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+          "dev": true
+        }
+      }
+    },
+    "estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true
+    },
+    "estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "dev": true
+    },
+    "event-pubsub": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/event-pubsub/-/event-pubsub-4.3.0.tgz",
+      "integrity": "sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==",
+      "dev": true
+    },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true
+    },
+    "events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true
+    },
+    "execa": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/execa/-/execa-1.0.0.tgz",
+      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^6.0.0",
+        "get-stream": "^4.0.0",
+        "is-stream": "^1.1.0",
+        "npm-run-path": "^2.0.0",
+        "p-finally": "^1.0.0",
+        "signal-exit": "^3.0.0",
+        "strip-eof": "^1.0.0"
+      }
+    },
+    "express": {
+      "version": "4.18.2",
+      "resolved": "https://registry.npmmirror.com/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "dev": true,
+      "requires": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.1",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.5.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.2.0",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.11.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "array-flatten": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmmirror.com/array-flatten/-/array-flatten-1.1.1.tgz",
+          "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+          "dev": true
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        }
+      }
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "fastq": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmmirror.com/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "dev": true,
+      "requires": {
+        "websocket-driver": ">=0.5.1"
+      }
+    },
+    "figures": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/figures/-/figures-2.0.0.tgz",
+      "integrity": "sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.5"
+      }
+    },
+    "filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "dev": true,
+      "requires": {
+        "minimatch": "^5.0.1"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.6",
+          "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-5.1.6.tgz",
+          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "finalhandler": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        }
+      }
+    },
+    "find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dev": true,
+      "requires": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      }
+    },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true
+    },
+    "follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "dev": true
+    },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmmirror.com/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
+    },
+    "forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "dev": true
+    },
+    "fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmmirror.com/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "dev": true
+    },
+    "fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "requires": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
+    "fs-monkey": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/fs-monkey/-/fs-monkey-1.0.5.tgz",
+      "integrity": "sha512-8uMbBjrhzW76TYgEV27Y5E//W2f/lTFmx78P2w19FZSxarhI/798APGQyuGCwmkNxgwGRhrLfvWyLBvNtuOmew==",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true
+    },
+    "function.prototype.name": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmmirror.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
+      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "functions-have-names": "^1.2.3"
+      }
+    },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
+    },
+    "gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true
+    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true
+    },
+    "get-intrinsic": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
+      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      }
+    },
+    "get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true
+    },
+    "get-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-4.1.0.tgz",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "dev": true,
+      "requires": {
+        "pump": "^3.0.0"
+      }
+    },
+    "get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.3"
+      }
+    },
+    "glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true
+    },
+    "globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true
+    },
+    "globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3"
+      }
+    },
+    "globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmmirror.com/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "requires": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      }
+    },
+    "gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.3"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true
+    },
+    "gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "requires": {
+        "duplexer": "^0.1.2"
+      }
+    },
+    "handle-thing": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/handle-thing/-/handle-thing-2.0.1.tgz",
+      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
+      "dev": true
+    },
+    "has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true
+    },
+    "has-property-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
+      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.2.2"
+      }
+    },
+    "has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "dev": true
+    },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true
+    },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "hash-sum": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz",
+      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
+      "dev": true
+    },
+    "hasown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.0.tgz",
+      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.2"
+      }
+    },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
+    },
+    "highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "dev": true
+    },
+    "hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+      "dev": true
+    },
+    "hpack.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmmirror.com/hpack.js/-/hpack.js-2.1.6.tgz",
+      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "obuf": "^1.0.0",
+        "readable-stream": "^2.0.1",
+        "wbuf": "^1.1.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmmirror.com/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.8",
+          "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz",
+          "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "html-entities": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/html-entities/-/html-entities-2.4.0.tgz",
+      "integrity": "sha512-igBTJcNNNhvZFRtm8uA6xMY6xYleeDwn3PeBCkDz7tHttv4F2hsDI2aPgNERWzvRcNYHNT3ymRaQzllmXj4YsQ==",
+      "dev": true
+    },
+    "html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true
+    },
+    "html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
+      "dev": true,
+      "requires": {
+        "camel-case": "^4.1.2",
+        "clean-css": "^5.2.2",
+        "commander": "^8.3.0",
+        "he": "^1.2.0",
+        "param-case": "^3.0.4",
+        "relateurl": "^0.2.7",
+        "terser": "^5.10.0"
+      }
+    },
+    "html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "dev": true
+    },
+    "html-webpack-plugin": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmmirror.com/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz",
+      "integrity": "sha512-6YrDKTuqaP/TquFH7h4srYWsZx+x6k6+FbsTm0ziCwGHDP78Unr1r9F/H4+sGmMbX08GQcJ+K64x55b+7VM/jg==",
+      "dev": true,
+      "requires": {
+        "@types/html-minifier-terser": "^6.0.0",
+        "html-minifier-terser": "^6.0.2",
+        "lodash": "^4.17.21",
+        "pretty-error": "^4.0.0",
+        "tapable": "^2.0.0"
+      }
+    },
+    "htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
+    "http-deceiver": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmmirror.com/http-deceiver/-/http-deceiver-1.2.7.tgz",
+      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
+      "dev": true
+    },
+    "http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dev": true,
+      "requires": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      }
+    },
+    "http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmmirror.com/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==",
+      "dev": true
+    },
+    "http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmmirror.com/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "requires": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      }
+    },
+    "http-proxy-middleware": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
+      "dev": true,
+      "requires": {
+        "@types/http-proxy": "^1.17.8",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      }
+    },
+    "human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "requires": {}
+    },
+    "idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "dev": true
+    },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true
+    },
+    "ignore": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/ignore/-/ignore-5.3.0.tgz",
+      "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==",
+      "dev": true
+    },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true
+    },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      }
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "internal-slot": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/internal-slot/-/internal-slot-1.0.6.tgz",
+      "integrity": "sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.2.2",
+        "hasown": "^2.0.0",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "ipaddr.js": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
+      "integrity": "sha512-LlbxQ7xKzfBusov6UMi4MFpEg0m+mAm9xyNGEduwXMEDuf4WfzB/RZwMVYEd7IKGvh4IUkEXYxtAVu9T3OelJQ==",
+      "dev": true
+    },
+    "is-array-buffer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
+    },
+    "is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "requires": {
+        "has-bigints": "^1.0.1"
+      }
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true
+    },
+    "is-core-module": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "dev": true,
+      "requires": {
+        "hasown": "^2.0.0"
+      }
+    },
+    "is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true
+    },
+    "is-file-esm": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/is-file-esm/-/is-file-esm-1.0.0.tgz",
+      "integrity": "sha512-rZlaNKb4Mr8WlRu2A9XdeoKgnO5aA53XdPHgCKVyCrQ/rWi89RET1+bq37Ru46obaQXeiX4vmFIm1vks41hoSA==",
+      "dev": true,
+      "requires": {
+        "read-pkg-up": "^7.0.1"
+      }
+    },
+    "is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "dev": true
+    },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+      "dev": true
+    },
+    "is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "dev": true
+    },
+    "is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "dev": true
+    },
+    "is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true
+    },
+    "is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+      "dev": true
+    },
+    "is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "dev": true
+    },
+    "is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "is-typed-array": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmmirror.com/is-typed-array/-/is-typed-array-1.1.12.tgz",
+      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "dev": true,
+      "requires": {
+        "which-typed-array": "^1.1.11"
+      }
+    },
+    "is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmmirror.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true
+    },
+    "is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
+    "is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "requires": {
+        "is-docker": "^2.0.0"
+      }
+    },
+    "isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true
+    },
+    "jake": {
+      "version": "10.8.7",
+      "resolved": "https://registry.npmmirror.com/jake/-/jake-10.8.7.tgz",
+      "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
+      "dev": true,
+      "requires": {
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.4",
+        "minimatch": "^3.1.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "async": {
+          "version": "3.2.5",
+          "resolved": "https://registry.npmmirror.com/async/-/async-3.2.5.tgz",
+          "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "javascript-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
+      "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
+      "dev": true
+    },
+    "jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmmirror.com/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "8.1.1",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-8.1.1.tgz",
+          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "joi": {
+      "version": "17.11.0",
+      "resolved": "https://registry.npmmirror.com/joi/-/joi-17.11.0.tgz",
+      "integrity": "sha512-NgB+lZLNoqISVy1rZocE9PZI36bL/77ie924Ri43yEvi9GUUMPeyVIr8KdFTMUlby1p0PBYMk9spIxEUQYqrJQ==",
+      "dev": true,
+      "requires": {
+        "@hapi/hoek": "^9.0.0",
+        "@hapi/topo": "^5.0.0",
+        "@sideway/address": "^4.1.3",
+        "@sideway/formula": "^3.0.1",
+        "@sideway/pinpoint": "^2.0.0"
+      }
+    },
+    "js-message": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
+      "integrity": "sha512-efJLHhLjIyKRewNS9EGZ4UpI8NguuL6fKkhRxVuMmrGV2xN/0APGdQYwLFky5w9naebSZ0OwAGp0G6/2Cg90rA==",
+      "dev": true
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true
+    },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
+    },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
+    "json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "dev": true
+    },
+    "json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true
+    },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
+    "jsonpointer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/jsonpointer/-/jsonpointer-5.0.1.tgz",
+      "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
+      "dev": true
+    },
+    "kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true
+    },
+    "klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "dev": true
+    },
+    "launch-editor": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmmirror.com/launch-editor/-/launch-editor-2.6.1.tgz",
+      "integrity": "sha512-eB/uXmFVpY4zezmGp5XtU21kwo7GBbKB+EQ+UZeWtGb9yAM5xt/Evk+lYH3eRNAtId+ej4u7TYPFZ07w4s7rRw==",
+      "dev": true,
+      "requires": {
+        "picocolors": "^1.0.0",
+        "shell-quote": "^1.8.1"
+      }
+    },
+    "launch-editor-middleware": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmmirror.com/launch-editor-middleware/-/launch-editor-middleware-2.6.1.tgz",
+      "integrity": "sha512-Fg/xYhf7ARmRp40n18wIfJyuAMEjXo67Yull7uF7d0OJ3qA4EYJISt1XfPPn69IIJ5jKgQwzcg6DqHYo95LL/g==",
+      "dev": true,
+      "requires": {
+        "launch-editor": "^2.6.1"
+      }
+    },
+    "less": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/less/-/less-4.2.0.tgz",
+      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
+      "dev": true,
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-8.1.1.tgz",
+      "integrity": "sha512-K93jJU7fi3n6rxVvzp8Cb88Uy9tcQKfHlkoezHwKILXhlNYiRQl4yowLIkQqmBXOH/5I8yoKiYeIf781HGkW9g==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4"
+      }
+    },
+    "leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "dev": true
+    },
+    "lib-flexible": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/lib-flexible/-/lib-flexible-0.3.2.tgz",
+      "integrity": "sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg=="
+    },
+    "lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true
+    },
+    "lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
+    "loader-runner": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+      "dev": true
+    },
+    "loader-utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+      "dev": true,
+      "requires": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        }
+      }
+    },
+    "locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^4.1.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true
+    },
+    "lodash.defaultsdeep": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmmirror.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz",
+      "integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==",
+      "dev": true
+    },
+    "lodash.kebabcase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
+      "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==",
+      "dev": true
+    },
+    "lodash.mapvalues": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmmirror.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
+      "integrity": "sha512-JPFqXFeZQ7BfS00H58kClY7SPVeHertPE0lNuCyZ26/XlN8TvakYD7b9bGyNmXbT/D3BbtPAAmq90gPWqLkxlQ==",
+      "dev": true
+    },
+    "lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "dev": true
+    },
+    "lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmmirror.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
+      "dev": true
+    },
+    "lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "dev": true
+    },
+    "log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "log-update": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/log-update/-/log-update-2.3.0.tgz",
+      "integrity": "sha512-vlP11XfFGyeNQlmEn9tJ66rEW1coA/79m5z6BCkudjbAGE83uhAcGYrBFwfs3AdLiLzGRusRPAbSPK9xZteCmg==",
+      "dev": true,
+      "requires": {
+        "ansi-escapes": "^3.0.0",
+        "cli-cursor": "^2.0.0",
+        "wrap-ansi": "^3.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-3.0.1.tgz",
+          "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
+          "dev": true
+        },
+        "cli-cursor": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmmirror.com/cli-cursor/-/cli-cursor-2.1.0.tgz",
+          "integrity": "sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==",
+          "dev": true,
+          "requires": {
+            "restore-cursor": "^2.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
+          "dev": true
+        },
+        "mimic-fn": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-1.2.0.tgz",
+          "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
+          "dev": true
+        },
+        "onetime": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/onetime/-/onetime-2.0.1.tgz",
+          "integrity": "sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "^1.0.0"
+          }
+        },
+        "restore-cursor": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/restore-cursor/-/restore-cursor-2.0.0.tgz",
+          "integrity": "sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==",
+          "dev": true,
+          "requires": {
+            "onetime": "^2.0.0",
+            "signal-exit": "^3.0.2"
+          }
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmmirror.com/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "dev": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz",
+          "integrity": "sha512-iXR3tDXpbnTpzjKSylUJRkLuOrEC7hwEB221cgn6wtF8wpmz28puFXAEfPT5zrjM3wahygB//VuWEr1vTkDcNQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^2.1.1",
+            "strip-ansi": "^4.0.0"
+          }
+        }
+      }
+    },
+    "lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "requires": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
+      "requires": {
+        "semver": "^6.0.0"
+      }
+    },
+    "mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "dev": true
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "dev": true
+    },
+    "memfs": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmmirror.com/memfs/-/memfs-3.5.3.tgz",
+      "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
+      "dev": true,
+      "requires": {
+        "fs-monkey": "^1.0.4"
+      }
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
+      "dev": true
+    },
+    "merge-source-map": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/merge-source-map/-/merge-source-map-1.1.0.tgz",
+      "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
+      "dev": true,
+      "requires": {
+        "source-map": "^0.6.1"
+      }
+    },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      }
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true
+    },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
+    "mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true
+    },
+    "mini-css-extract-plugin": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmmirror.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
+      "integrity": "sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==",
+      "dev": true,
+      "requires": {
+        "schema-utils": "^4.0.0"
+      },
+      "dependencies": {
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "schema-utils": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.2.0.tgz",
+          "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.9.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.1.0"
+          }
+        }
+      }
+    },
+    "minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmmirror.com/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true
+    },
+    "minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      },
+      "dependencies": {
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
+    },
+    "mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.6"
+      }
+    },
+    "module-alias": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/module-alias/-/module-alias-2.2.3.tgz",
+      "integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
+      "dev": true
+    },
+    "mrmime": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz",
+      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
+      "dev": true
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "multicast-dns": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmmirror.com/multicast-dns/-/multicast-dns-7.2.5.tgz",
+      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
+      "dev": true,
+      "requires": {
+        "dns-packet": "^5.2.2",
+        "thunky": "^1.0.2"
+      }
+    },
+    "mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "requires": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
+    },
+    "needle": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/needle/-/needle-3.2.0.tgz",
+      "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
+    "negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "dev": true
+    },
+    "neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmmirror.com/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
+    },
+    "nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
+    "no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "requires": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dev": true,
+      "requires": {
+        "whatwg-url": "^5.0.0"
+      }
+    },
+    "node-forge": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
+      "dev": true
+    },
+    "node-releases": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.13.tgz",
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
+    },
+    "normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+          "dev": true
+        }
+      }
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="
+    },
+    "normalize-url": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/normalize-url/-/normalize-url-6.1.0.tgz",
+      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+      "dev": true
+    },
+    "npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
+      "dev": true,
+      "requires": {
+        "path-key": "^2.0.0"
+      }
+    },
+    "nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true
+    },
+    "object-inspect": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "dev": true
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
+    },
+    "object.assign": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmmirror.com/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "obuf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
+      "dev": true
+    },
+    "on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dev": true,
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "requires": {
+        "mimic-fn": "^2.1.0"
+      }
+    },
+    "open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmmirror.com/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "dev": true,
+      "requires": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      }
+    },
+    "opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmmirror.com/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true
+    },
+    "ora": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmmirror.com/ora/-/ora-5.4.1.tgz",
+      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "dev": true,
+      "requires": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
+      "dev": true
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.2.0"
+      }
+    },
+    "p-retry": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmmirror.com/p-retry/-/p-retry-4.6.2.tgz",
+      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+      "dev": true,
+      "requires": {
+        "@types/retry": "0.12.0",
+        "retry": "^0.13.1"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
+    "param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "dev": true,
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      }
+    },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true
+    },
+    "parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "dev": true
+    },
+    "parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "dev": true,
+      "requires": {
+        "parse5": "^6.0.1"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmmirror.com/parse5/-/parse5-6.0.1.tgz",
+          "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+          "dev": true
+        }
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "dev": true
+    },
+    "pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true
+    },
+    "path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmmirror.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
+      "dev": true
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
+    },
+    "pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true
+    },
+    "pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "requires": {
+        "find-up": "^4.0.0"
+      }
+    },
+    "portfinder": {
+      "version": "1.0.32",
+      "resolved": "https://registry.npmmirror.com/portfinder/-/portfinder-1.0.32.tgz",
+      "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
+      "dev": true,
+      "requires": {
+        "async": "^2.6.4",
+        "debug": "^3.2.7",
+        "mkdirp": "^0.5.6"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "requires": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "postcss-attribute-case-insensitive": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-6.0.2.tgz",
+      "integrity": "sha512-IRuCwwAAQbgaLhxQdQcIIK0dCVXg3XDUnzgKD8iwdiYdwU4rMWRWyl/W9/0nA4ihVpq5pyALiHB2veBJ0292pw==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
+    "postcss-calc": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmmirror.com/postcss-calc/-/postcss-calc-8.2.4.tgz",
+      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.9",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-clamp": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-clamp/-/postcss-clamp-4.1.0.tgz",
+      "integrity": "sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-color-functional-notation": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-6.0.2.tgz",
+      "integrity": "sha512-FsjSmlSufuiFBsIqQ++VxFmvX7zKndZpBkHmfXr4wqhvzM92FTEkAh703iqWTl1U3faTgqioIqCbfqdWiFVwtw==",
+      "requires": {
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-color-hex-alpha": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-9.0.2.tgz",
+      "integrity": "sha512-SfPjgr//VQ/DOCf80STIAsdAs7sbIbxATvVmd+Ec7JvR8onz9pjawhq3BJM3Pie40EE3TyB0P6hft16D33Nlyg==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-color-rebeccapurple": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-9.0.1.tgz",
+      "integrity": "sha512-ds4cq5BjRieizVb2PnvbJ0omg9VCo2/KzluvoFZbxuGpsGJ5BQSD93CHBooinEtangCM5YqUOerGDl4xGmOb6Q==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-colormin": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
+      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.1",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-convert-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmmirror.com/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-custom-media": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-10.0.2.tgz",
+      "integrity": "sha512-zcEFNRmDm2fZvTPdI1pIW3W//UruMcLosmMiCdpQnrCsTRzWlKQPYMa1ud9auL0BmrryKK1+JjIGn19K0UjO/w==",
+      "requires": {
+        "@csstools/cascade-layer-name-parser": "^1.0.5",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/media-query-list-parser": "^2.1.5"
+      }
+    },
+    "postcss-custom-properties": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.3.2.tgz",
+      "integrity": "sha512-2Coszybpo8lpLY24vy2CYv9AasiZ39/bs8Imv0pWMq55Gl8NWzfc24OAo3zIX7rc6uUJAqESnVOMZ6V6lpMjJA==",
+      "requires": {
+        "@csstools/cascade-layer-name-parser": "^1.0.5",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-custom-selectors": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.6.tgz",
+      "integrity": "sha512-svsjWRaxqL3vAzv71dV0/65P24/FB8TbPX+lWyyf9SZ7aZm4S4NhCn7N3Bg+Z5sZunG3FS8xQ80LrCU9hb37cw==",
+      "requires": {
+        "@csstools/cascade-layer-name-parser": "^1.0.5",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "postcss-dir-pseudo-class": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-8.0.0.tgz",
+      "integrity": "sha512-Oy5BBi0dWPwij/IA+yDYj+/OBMQ9EPqAzTHeSNUYrUWdll/PRJmcbiUj0MNcsBi681I1gcSTLvMERPaXzdbvJg==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "postcss-discard-comments": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-discard-duplicates": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-discard-empty": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-discard-overridden": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-double-position-gradients": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-5.0.2.tgz",
+      "integrity": "sha512-KTbvdOOy8z8zb0BTkEg4/1vqlRlApdvjw8/pFoehgQl0WVO+fezDGlvo0B8xRA+XccA7ohkQCULKNsiNOx70Cw==",
+      "requires": {
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-focus-visible": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-9.0.0.tgz",
+      "integrity": "sha512-zA4TbVaIaT8npZBEROhZmlc+GBKE8AELPHXE7i4TmIUEQhw/P/mSJfY9t6tBzpQ1rABeGtEOHYrW4SboQeONMQ==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "postcss-focus-within": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-8.0.0.tgz",
+      "integrity": "sha512-E7+J9nuQzZaA37D/MUZMX1K817RZGDab8qw6pFwzAkDd/QtlWJ9/WTKmzewNiuxzeq6WWY7ATiRePVoDKp+DnA==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "postcss-font-variant": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
+      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
+      "requires": {}
+    },
+    "postcss-gap-properties": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-5.0.0.tgz",
+      "integrity": "sha512-YjsEEL6890P7MCv6fch6Am1yq0EhQCJMXyT4LBohiu87+4/WqR7y5W3RIv53WdA901hhytgRvjlrAhibhW4qsA==",
+      "requires": {}
+    },
+    "postcss-image-set-function": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-6.0.1.tgz",
+      "integrity": "sha512-VlZncC9hhZ5tg0JllY4g6Z28BeoPO8DIkelioEEkXL0AA0IORlqYpTi2L8TUnl4YQrlwvBgxVy+mdZJw5R/cIQ==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-lab-function": {
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-6.0.7.tgz",
+      "integrity": "sha512-4d1lhDVPukHFqkMv4G5vVcK+tgY52vwb5uR1SWKOaO5389r2q8fMxBWuXSW+YtbCOEGP0/X9KERi9E9le2pJuw==",
+      "requires": {
+        "@csstools/css-color-parser": "^1.4.0",
+        "@csstools/css-parser-algorithms": "^2.3.2",
+        "@csstools/css-tokenizer": "^2.2.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2"
+      }
+    },
+    "postcss-loader": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmmirror.com/postcss-loader/-/postcss-loader-6.2.1.tgz",
+      "integrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^7.0.0",
+        "klona": "^2.0.5",
+        "semver": "^7.3.5"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-logical": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-7.0.0.tgz",
+      "integrity": "sha512-zYf3vHkoW82f5UZTEXChTJvH49Yl9X37axTZsJGxrCG2kOUwtaAoz9E7tqYg0lsIoJLybaL8fk/2mOi81zVIUw==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-merge-longhand": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmmirror.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^5.1.1"
+      }
+    },
+    "postcss-merge-rules": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmmirror.com/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
+      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^3.1.0",
+        "postcss-selector-parser": "^6.0.5"
+      }
+    },
+    "postcss-minify-font-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
+      "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-minify-gradients": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
+      "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
+      "dev": true,
+      "requires": {
+        "colord": "^2.9.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-minify-params": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmmirror.com/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-minify-selectors": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
+      "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.5"
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-modules-local-by-default": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz",
+      "integrity": "sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0"
+      }
+    },
+    "postcss-nesting": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.0.1.tgz",
+      "integrity": "sha512-6LCqCWP9pqwXw/njMvNK0hGY44Fxc4B2EsGbn6xDcxbNRzP8GYoxT7yabVVMLrX3quqOJ9hg2jYMsnkedOf8pA==",
+      "requires": {
+        "@csstools/selector-specificity": "^3.0.0",
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "postcss-normalize-charset": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-normalize-display-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
+      "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-positions": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
+      "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-repeat-style": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
+      "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-string": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
+      "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-timing-functions": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
+      "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-unicode": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
+      "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
+      "dev": true,
+      "requires": {
+        "normalize-url": "^6.0.1",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-normalize-whitespace": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
+      "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-opacity-percentage": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-2.0.0.tgz",
+      "integrity": "sha512-lyDrCOtntq5Y1JZpBFzIWm2wG9kbEdujpNt4NLannF+J9c8CgFIzPa80YQfdza+Y+yFfzbYj/rfoOsYsooUWTQ==",
+      "requires": {}
+    },
+    "postcss-ordered-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmmirror.com/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
+      "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
+      "dev": true,
+      "requires": {
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-overflow-shorthand": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-5.0.0.tgz",
+      "integrity": "sha512-2rlxDyeSics/hC2FuMdPnWiP9WUPZ5x7FTuArXLFVpaSQ2woPSfZS4RD59HuEokbZhs/wPUQJ1E3MT6zVv94MQ==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-page-break": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
+      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
+      "requires": {}
+    },
+    "postcss-place": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-9.0.0.tgz",
+      "integrity": "sha512-qLEPD9VPH5opDVemwmRaujODF9nExn24VOC3ghgVLEvfYN7VZLwJHes0q/C9YR5hI2UC3VgBE8Wkdp1TxCXhtg==",
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-preset-env": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.3.0.tgz",
+      "integrity": "sha512-ycw6doPrqV6QxDCtgiyGDef61bEfiSc59HGM4gOw/wxQxmKnhuEery61oOC/5ViENz/ycpRsuhTexs1kUBTvVw==",
+      "requires": {
+        "@csstools/postcss-cascade-layers": "^4.0.1",
+        "@csstools/postcss-color-function": "^3.0.7",
+        "@csstools/postcss-color-mix-function": "^2.0.7",
+        "@csstools/postcss-exponential-functions": "^1.0.1",
+        "@csstools/postcss-font-format-keywords": "^3.0.0",
+        "@csstools/postcss-gamut-mapping": "^1.0.0",
+        "@csstools/postcss-gradients-interpolation-method": "^4.0.7",
+        "@csstools/postcss-hwb-function": "^3.0.6",
+        "@csstools/postcss-ic-unit": "^3.0.2",
+        "@csstools/postcss-initial": "^1.0.0",
+        "@csstools/postcss-is-pseudo-class": "^4.0.3",
+        "@csstools/postcss-logical-float-and-clear": "^2.0.0",
+        "@csstools/postcss-logical-overflow": "^1.0.0",
+        "@csstools/postcss-logical-overscroll-behavior": "^1.0.0",
+        "@csstools/postcss-logical-resize": "^2.0.0",
+        "@csstools/postcss-logical-viewport-units": "^2.0.3",
+        "@csstools/postcss-media-minmax": "^1.1.0",
+        "@csstools/postcss-media-queries-aspect-ratio-number-values": "^2.0.3",
+        "@csstools/postcss-nested-calc": "^3.0.0",
+        "@csstools/postcss-normalize-display-values": "^3.0.1",
+        "@csstools/postcss-oklab-function": "^3.0.7",
+        "@csstools/postcss-progressive-custom-properties": "^3.0.2",
+        "@csstools/postcss-relative-color-syntax": "^2.0.7",
+        "@csstools/postcss-scope-pseudo-class": "^3.0.0",
+        "@csstools/postcss-stepped-value-functions": "^3.0.2",
+        "@csstools/postcss-text-decoration-shorthand": "^3.0.3",
+        "@csstools/postcss-trigonometric-functions": "^3.0.2",
+        "@csstools/postcss-unset-value": "^3.0.0",
+        "autoprefixer": "^10.4.16",
+        "browserslist": "^4.22.1",
+        "css-blank-pseudo": "^6.0.0",
+        "css-has-pseudo": "^6.0.0",
+        "css-prefers-color-scheme": "^9.0.0",
+        "cssdb": "^7.9.0",
+        "postcss-attribute-case-insensitive": "^6.0.2",
+        "postcss-clamp": "^4.1.0",
+        "postcss-color-functional-notation": "^6.0.2",
+        "postcss-color-hex-alpha": "^9.0.2",
+        "postcss-color-rebeccapurple": "^9.0.1",
+        "postcss-custom-media": "^10.0.2",
+        "postcss-custom-properties": "^13.3.2",
+        "postcss-custom-selectors": "^7.1.6",
+        "postcss-dir-pseudo-class": "^8.0.0",
+        "postcss-double-position-gradients": "^5.0.2",
+        "postcss-focus-visible": "^9.0.0",
+        "postcss-focus-within": "^8.0.0",
+        "postcss-font-variant": "^5.0.0",
+        "postcss-gap-properties": "^5.0.0",
+        "postcss-image-set-function": "^6.0.1",
+        "postcss-lab-function": "^6.0.7",
+        "postcss-logical": "^7.0.0",
+        "postcss-nesting": "^12.0.1",
+        "postcss-opacity-percentage": "^2.0.0",
+        "postcss-overflow-shorthand": "^5.0.0",
+        "postcss-page-break": "^3.0.4",
+        "postcss-place": "^9.0.0",
+        "postcss-pseudo-class-any-link": "^9.0.0",
+        "postcss-replace-overflow-wrap": "^4.0.0",
+        "postcss-selector-not": "^7.0.1",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-pseudo-class-any-link": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-9.0.0.tgz",
+      "integrity": "sha512-QNCYIL98VKFKY6HGDEJpF6+K/sg9bxcUYnOmNHJxZS5wsFDFaVoPeG68WAuhsqwbIBSo/b9fjEnTwY2mTSD+uA==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "postcss-pxtorem": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-5.1.1.tgz",
+      "integrity": "sha512-uvgIujL/pn0GbZ+rczESD2orHsbXrrCqi+q9wJO8PCk3ZGCoVVtu5hZTbtk+tbZHZP5UkTfCvqOrTZs9Ncqfsg==",
+      "requires": {
+        "postcss": "^7.0.27"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
+    "postcss-reduce-initial": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
+      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0"
+      }
+    },
+    "postcss-reduce-transforms": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
+      "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
+    "postcss-replace-overflow-wrap": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
+      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
+      "requires": {}
+    },
+    "postcss-selector-not": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-7.0.1.tgz",
+      "integrity": "sha512-1zT5C27b/zeJhchN7fP0kBr16Cc61mu7Si9uWWLoA3Px/D9tIJPKchJCkUH3tPO5D0pCFmGeApAv8XpXBQJ8SQ==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.13",
+      "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "requires": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-svgo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
+      "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^2.7.0"
+      }
+    },
+    "postcss-unique-selectors": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
+      "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.5"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
+    "prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "optional": true
+    },
+    "pretty-bytes": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
+      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
+      "dev": true
+    },
+    "pretty-error": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/pretty-error/-/pretty-error-4.0.0.tgz",
+      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.20",
+        "renderkid": "^3.0.0"
+      }
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "progress-webpack-plugin": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmmirror.com/progress-webpack-plugin/-/progress-webpack-plugin-1.0.16.tgz",
+      "integrity": "sha512-sdiHuuKOzELcBANHfrupYo+r99iPRyOnw15qX+rNlVUqXGfjXdH4IgxriKwG1kNJwVswKQHMdj1hYZMcb9jFaA==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.1.0",
+        "figures": "^2.0.0",
+        "log-update": "^2.3.0"
+      }
+    },
+    "proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmmirror.com/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dev": true,
+      "requires": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "dependencies": {
+        "ipaddr.js": {
+          "version": "1.9.1",
+          "resolved": "https://registry.npmmirror.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+          "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+          "dev": true
+        }
+      }
+    },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true
+    },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
+      "dev": true
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true
+    },
+    "qs": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "dev": true,
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
+    "randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "dev": true
+    },
+    "raw-body": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "dev": true,
+      "requires": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmmirror.com/bytes/-/bytes-3.1.2.tgz",
+          "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+          "dev": true
+        }
+      }
+    },
+    "read-pkg": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/read-pkg/-/read-pkg-5.2.0.tgz",
+      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+      "dev": true,
+      "requires": {
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^2.5.0",
+        "parse-json": "^5.0.0",
+        "type-fest": "^0.6.0"
+      }
+    },
+    "read-pkg-up": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+      "dev": true,
+      "requires": {
+        "find-up": "^4.1.0",
+        "read-pkg": "^5.2.0",
+        "type-fest": "^0.8.1"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-0.8.1.tgz",
+          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+          "dev": true
+        }
+      }
+    },
+    "readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      }
+    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true
+    },
+    "regenerate-unicode-properties": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmmirror.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz",
+      "integrity": "sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==",
+      "dev": true,
+      "requires": {
+        "regenerate": "^1.4.2"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
+      "dev": true
+    },
+    "regenerator-transform": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmmirror.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
+      "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "regexp.prototype.flags": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
+      "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "set-function-name": "^2.0.0"
+      }
+    },
+    "regexpu-core": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmmirror.com/regexpu-core/-/regexpu-core-5.3.2.tgz",
+      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+      "dev": true,
+      "requires": {
+        "@babel/regjsgen": "^0.8.0",
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsparser": "^0.9.1",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.1.0"
+      }
+    },
+    "register-service-worker": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmmirror.com/register-service-worker/-/register-service-worker-1.7.2.tgz",
+      "integrity": "sha512-CiD3ZSanZqcMPRhtfct5K9f7i3OLCcBBWsJjLh1gW9RO/nS94sVzY59iS+fgYBOBqaBpf4EzfqUF3j9IG+xo8A=="
+    },
+    "regjsparser": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmmirror.com/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+      "dev": true,
+      "requires": {
+        "jsesc": "~0.5.0"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+          "dev": true
+        }
+      }
+    },
+    "relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmmirror.com/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+      "dev": true
+    },
+    "renderkid": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/renderkid/-/renderkid-3.0.0.tgz",
+      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
+      "dev": true,
+      "requires": {
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^6.0.1"
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true
+    },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true
+    },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true
+    },
+    "resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      }
+    },
+    "resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true
+    },
+    "restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "requires": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmmirror.com/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "dev": true
+    },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "rollup": {
+      "version": "2.79.1",
+      "resolved": "https://registry.npmmirror.com/rollup/-/rollup-2.79.1.tgz",
+      "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+      "dev": true,
+      "requires": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "rollup-plugin-terser": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmmirror.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
+      "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.10.4",
+        "jest-worker": "^26.2.1",
+        "serialize-javascript": "^4.0.0",
+        "terser": "^5.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "jest-worker": {
+          "version": "26.6.2",
+          "resolved": "https://registry.npmmirror.com/jest-worker/-/jest-worker-26.6.2.tgz",
+          "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+          "dev": true,
+          "requires": {
+            "@types/node": "*",
+            "merge-stream": "^2.0.0",
+            "supports-color": "^7.0.0"
+          }
+        },
+        "serialize-javascript": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+          "dev": true,
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "safe-array-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
+      "integrity": "sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true
+    },
+    "safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      }
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "sax": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/sax/-/sax-1.3.0.tgz",
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
+      "dev": true,
+      "optional": true
+    },
+    "schema-utils": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
+      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+      "dev": true,
+      "requires": {
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
+        "ajv-keywords": "^3.5.2"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true,
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        }
+      }
+    },
+    "select-hose": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",
+      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
+      "dev": true
+    },
+    "selfsigned": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/selfsigned/-/selfsigned-2.4.1.tgz",
+      "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
+      "dev": true,
+      "requires": {
+        "@types/node-forge": "^1.3.0",
+        "node-forge": "^1"
+      }
+    },
+    "semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true
+    },
+    "send": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmmirror.com/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          },
+          "dependencies": {
+            "ms": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+              "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+              "dev": true
+            }
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "dev": true
+        }
+      }
+    },
+    "serialize-javascript": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
+      "dev": true,
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmmirror.com/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
+      "dev": true,
+      "requires": {
+        "accepts": "~1.3.4",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.2",
+        "mime-types": "~2.1.17",
+        "parseurl": "~1.3.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "depd": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmmirror.com/depd/-/depd-1.1.2.tgz",
+          "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+          "dev": true
+        },
+        "http-errors": {
+          "version": "1.6.3",
+          "resolved": "https://registry.npmmirror.com/http-errors/-/http-errors-1.6.3.tgz",
+          "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+          "dev": true,
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.3",
+            "setprototypeof": "1.1.0",
+            "statuses": ">= 1.4.0 < 2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        },
+        "setprototypeof": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.1.0.tgz",
+          "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
+          "dev": true
+        },
+        "statuses": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmmirror.com/statuses/-/statuses-1.5.0.tgz",
+          "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+          "dev": true
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "dev": true,
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.18.0"
+      }
+    },
+    "set-function-length": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.1.1.tgz",
+      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+      "dev": true,
+      "requires": {
+        "define-data-property": "^1.1.1",
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      }
+    },
+    "set-function-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/set-function-name/-/set-function-name-2.0.1.tgz",
+      "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==",
+      "dev": true,
+      "requires": {
+        "define-data-property": "^1.0.1",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.0"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "dev": true
+    },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
+    "shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^1.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+      "dev": true
+    },
+    "shell-quote": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/shell-quote/-/shell-quote-1.8.1.tgz",
+      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+      "dev": true
+    },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
+    "signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
+    },
+    "sirv": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/sirv/-/sirv-2.0.3.tgz",
+      "integrity": "sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==",
+      "dev": true,
+      "requires": {
+        "@polka/url": "^1.0.0-next.20",
+        "mrmime": "^1.0.0",
+        "totalist": "^3.0.0"
+      }
+    },
+    "slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true
+    },
+    "sockjs": {
+      "version": "0.3.24",
+      "resolved": "https://registry.npmmirror.com/sockjs/-/sockjs-0.3.24.tgz",
+      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+      "dev": true,
+      "requires": {
+        "faye-websocket": "^0.11.3",
+        "uuid": "^8.3.2",
+        "websocket-driver": "^0.7.4"
+      }
+    },
+    "source-list-map": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz",
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
+      "dev": true
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+    },
+    "source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
+    "spdx-correct": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/spdx-correct/-/spdx-correct-3.2.0.tgz",
+      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dev": true,
+      "requires": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "requires": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.16",
+      "resolved": "https://registry.npmmirror.com/spdx-license-ids/-/spdx-license-ids-3.0.16.tgz",
+      "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==",
+      "dev": true
+    },
+    "spdy": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/spdy/-/spdy-4.0.2.tgz",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
+        "http-deceiver": "^1.2.7",
+        "select-hose": "^2.0.0",
+        "spdy-transport": "^3.0.0"
+      }
+    },
+    "spdy-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
+        "hpack.js": "^2.1.6",
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
+      }
+    },
+    "ssri": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
+      "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.1.1"
+      }
+    },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
+    },
+    "stackframe": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmmirror.com/stackframe/-/stackframe-1.3.4.tgz",
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==",
+      "dev": true
+    },
+    "statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "dev": true
+    },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      }
+    },
+    "string.prototype.matchall": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmmirror.com/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz",
+      "integrity": "sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "get-intrinsic": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.5",
+        "regexp.prototype.flags": "^1.5.0",
+        "set-function-name": "^2.0.0",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "string.prototype.trim": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmmirror.com/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
+      "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      }
+    },
+    "string.prototype.trimend": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz",
+      "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz",
+      "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1"
+      }
+    },
+    "stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "requires": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.1"
+      }
+    },
+    "strip-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-comments/-/strip-comments-2.0.1.tgz",
+      "integrity": "sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==",
+      "dev": true
+    },
+    "strip-eof": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/strip-eof/-/strip-eof-1.0.0.tgz",
+      "integrity": "sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==",
+      "dev": true
+    },
+    "strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true
+    },
+    "stylehacks": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/stylehacks/-/stylehacks-5.1.1.tgz",
+      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.4",
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true
+    },
+    "svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "dev": true
+    },
+    "svgo": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmmirror.com/svgo/-/svgo-2.8.0.tgz",
+      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+      "dev": true,
+      "requires": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "picocolors": "^1.0.0",
+        "stable": "^0.1.8"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        }
+      }
+    },
+    "tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "dev": true
+    },
+    "temp-dir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/temp-dir/-/temp-dir-2.0.0.tgz",
+      "integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
+      "dev": true
+    },
+    "tempy": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmmirror.com/tempy/-/tempy-0.6.0.tgz",
+      "integrity": "sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==",
+      "dev": true,
+      "requires": {
+        "is-stream": "^2.0.0",
+        "temp-dir": "^2.0.0",
+        "type-fest": "^0.16.0",
+        "unique-string": "^2.0.0"
+      },
+      "dependencies": {
+        "is-stream": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-2.0.1.tgz",
+          "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+          "dev": true
+        },
+        "type-fest": {
+          "version": "0.16.0",
+          "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-0.16.0.tgz",
+          "integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==",
+          "dev": true
+        }
+      }
+    },
+    "terser": {
+      "version": "5.24.0",
+      "resolved": "https://registry.npmmirror.com/terser/-/terser-5.24.0.tgz",
+      "integrity": "sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        }
+      }
+    },
+    "terser-webpack-plugin": {
+      "version": "5.3.9",
+      "resolved": "https://registry.npmmirror.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz",
+      "integrity": "sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^3.1.1",
+        "serialize-javascript": "^6.0.1",
+        "terser": "^5.16.8"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true,
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
+          "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "requires": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "requires": {
+        "thenify": ">= 3.1.0 < 4"
+      }
+    },
+    "thread-loader": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/thread-loader/-/thread-loader-3.0.4.tgz",
+      "integrity": "sha512-ByaL2TPb+m6yArpqQUZvP+5S1mZtXsEP7nWKKlAUTm7fCml8kB5s1uI3+eHRP2bk5mVYfRSBI7FFf+tWEyLZwA==",
+      "dev": true,
+      "requires": {
+        "json-parse-better-errors": "^1.0.2",
+        "loader-runner": "^4.1.0",
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true,
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
+          "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "thunky": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz",
+      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
+      "dev": true
+    },
+    "to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "dev": true
+    },
+    "totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true
+    },
+    "tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "dev": true
+    },
+    "tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
+    },
+    "type-fest": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmmirror.com/type-fest/-/type-fest-0.6.0.tgz",
+      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+      "dev": true
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmmirror.com/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dev": true,
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "typed-array-buffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
+      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "typed-array-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
+      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "typed-array-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "has-proto": "^1.0.1",
+        "is-typed-array": "^1.1.10"
+      }
+    },
+    "typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      }
+    },
+    "unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      }
+    },
+    "undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
+    "unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+      "dev": true
+    },
+    "unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "dev": true,
+      "requires": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      }
+    },
+    "unicode-match-property-value-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
+      "dev": true
+    },
+    "unicode-property-aliases-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+      "dev": true
+    },
+    "unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "dev": true,
+      "requires": {
+        "crypto-random-string": "^2.0.0"
+      }
+    },
+    "universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "dev": true
+    },
+    "upath": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+      "dev": true
+    },
+    "update-browserslist-db": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "requires": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      }
+    },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
+      "dev": true
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "dev": true
+    },
+    "uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true
+    },
+    "validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "requires": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "dev": true
+    },
+    "vue": {
+      "version": "2.7.15",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.15.tgz",
+      "integrity": "sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ==",
+      "requires": {
+        "@vue/compiler-sfc": "2.7.15",
+        "csstype": "^3.1.0"
+      }
+    },
+    "vue-hot-reload-api": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
+      "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
+      "dev": true
+    },
+    "vue-loader": {
+      "version": "17.3.1",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.3.1.tgz",
+      "integrity": "sha512-nmVu7KU8geOyzsStyyaxID/uBGDMS8BkPXb6Lu2SNkMawriIbb+hYrNtgftHMKxOSkjjjTF5OSSwPo3KP59egg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "watchpack": "^2.4.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "vue-router": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+    },
+    "vue-style-loader": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
+      "integrity": "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==",
+      "dev": true,
+      "requires": {
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.0.2"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+          "dev": true
+        }
+      }
+    },
+    "vue-template-compiler": {
+      "version": "2.7.15",
+      "resolved": "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.15.tgz",
+      "integrity": "sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==",
+      "dev": true,
+      "requires": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
+    "vue-template-es2015-compiler": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
+      "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
+      "dev": true
+    },
+    "vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "requires": {}
+    },
+    "watchpack": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "dev": true,
+      "requires": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      }
+    },
+    "wbuf": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmmirror.com/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+      "dev": true,
+      "requires": {
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dev": true,
+      "requires": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "dev": true
+    },
+    "webpack": {
+      "version": "5.89.0",
+      "resolved": "https://registry.npmmirror.com/webpack/-/webpack-5.89.0.tgz",
+      "integrity": "sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==",
+      "dev": true,
+      "requires": {
+        "@types/eslint-scope": "^3.7.3",
+        "@types/estree": "^1.0.0",
+        "@webassemblyjs/ast": "^1.11.5",
+        "@webassemblyjs/wasm-edit": "^1.11.5",
+        "@webassemblyjs/wasm-parser": "^1.11.5",
+        "acorn": "^8.7.1",
+        "acorn-import-assertions": "^1.9.0",
+        "browserslist": "^4.14.5",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.15.0",
+        "es-module-lexer": "^1.2.1",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.9",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.2.0",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.3.7",
+        "watchpack": "^2.4.0",
+        "webpack-sources": "^3.2.3"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true,
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
+          "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "webpack-bundle-analyzer": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmmirror.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz",
+      "integrity": "sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==",
+      "dev": true,
+      "requires": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "commander": "^7.2.0",
+        "debounce": "^1.2.1",
+        "escape-string-regexp": "^4.0.0",
+        "gzip-size": "^6.0.0",
+        "html-escaper": "^2.0.2",
+        "is-plain-object": "^5.0.0",
+        "opener": "^1.5.2",
+        "picocolors": "^1.0.0",
+        "sirv": "^2.0.3",
+        "ws": "^7.3.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        }
+      }
+    },
+    "webpack-chain": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmmirror.com/webpack-chain/-/webpack-chain-6.5.1.tgz",
+      "integrity": "sha512-7doO/SRtLu8q5WM0s7vPKPWX580qhi0/yBHkOxNkv50f6qB76Zy9o2wRTrrPULqYTvQlVHuvbA8v+G5ayuUDsA==",
+      "dev": true,
+      "requires": {
+        "deepmerge": "^1.5.2",
+        "javascript-stringify": "^2.0.1"
+      }
+    },
+    "webpack-dev-middleware": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmmirror.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
+      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "dev": true,
+      "requires": {
+        "colorette": "^2.0.10",
+        "memfs": "^3.4.3",
+        "mime-types": "^2.1.31",
+        "range-parser": "^1.2.1",
+        "schema-utils": "^4.0.0"
+      },
+      "dependencies": {
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "schema-utils": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.2.0.tgz",
+          "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.9.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.1.0"
+          }
+        }
+      }
+    },
+    "webpack-dev-server": {
+      "version": "4.15.1",
+      "resolved": "https://registry.npmmirror.com/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz",
+      "integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==",
+      "dev": true,
+      "requires": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/express": "^4.17.13",
+        "@types/serve-index": "^1.9.1",
+        "@types/serve-static": "^1.13.10",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.5.5",
+        "ansi-html-community": "^0.0.8",
+        "bonjour-service": "^1.0.11",
+        "chokidar": "^3.5.3",
+        "colorette": "^2.0.10",
+        "compression": "^1.7.4",
+        "connect-history-api-fallback": "^2.0.0",
+        "default-gateway": "^6.0.3",
+        "express": "^4.17.3",
+        "graceful-fs": "^4.2.6",
+        "html-entities": "^2.3.2",
+        "http-proxy-middleware": "^2.0.3",
+        "ipaddr.js": "^2.0.1",
+        "launch-editor": "^2.6.0",
+        "open": "^8.0.9",
+        "p-retry": "^4.5.0",
+        "rimraf": "^3.0.2",
+        "schema-utils": "^4.0.0",
+        "selfsigned": "^2.1.1",
+        "serve-index": "^1.9.1",
+        "sockjs": "^0.3.24",
+        "spdy": "^4.0.2",
+        "webpack-dev-middleware": "^5.3.1",
+        "ws": "^8.13.0"
+      },
+      "dependencies": {
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "schema-utils": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.2.0.tgz",
+          "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.9.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.1.0"
+          }
+        },
+        "ws": {
+          "version": "8.14.2",
+          "resolved": "https://registry.npmmirror.com/ws/-/ws-8.14.2.tgz",
+          "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
+          "dev": true,
+          "requires": {}
+        }
+      }
+    },
+    "webpack-merge": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmmirror.com/webpack-merge/-/webpack-merge-5.10.0.tgz",
+      "integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "flat": "^5.0.2",
+        "wildcard": "^2.0.0"
+      }
+    },
+    "webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "dev": true
+    },
+    "webpack-virtual-modules": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.6.tgz",
+      "integrity": "sha512-5tyDlKLqPfMqjT3Q9TAqf2YqjwmnUleZwzJi1A5qXnlBCdj2AtOJ6wAWdglTIDOPgOiOrXeBeFcsQ8+aGQ6QbA==",
+      "dev": true
+    },
+    "websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmmirror.com/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dev": true,
+      "requires": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      }
+    },
+    "websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmmirror.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "dev": true
+    },
+    "whatwg-fetch": {
+      "version": "3.6.19",
+      "resolved": "https://registry.npmmirror.com/whatwg-fetch/-/whatwg-fetch-3.6.19.tgz",
+      "integrity": "sha512-d67JP4dHSbm2TrpFj8AbO8DnL1JXL5J9u0Kq2xW6d0TFDbCA3Muhdt8orXC22utleTVj7Prqt82baN6RBvnEgw==",
+      "dev": true
+    },
+    "whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dev": true,
+      "requires": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
+    "which-typed-array": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmmirror.com/which-typed-array/-/which-typed-array-1.1.13.tgz",
+      "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.4",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "wildcard": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/wildcard/-/wildcard-2.0.1.tgz",
+      "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
+      "dev": true
+    },
+    "workbox-background-sync": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-background-sync/-/workbox-background-sync-6.6.0.tgz",
+      "integrity": "sha512-jkf4ZdgOJxC9u2vztxLuPT/UjlH7m/nWRQ/MgGL0v8BJHoZdVGJd18Kck+a0e55wGXdqyHO+4IQTk0685g4MUw==",
+      "dev": true,
+      "requires": {
+        "idb": "^7.0.1",
+        "workbox-core": "6.6.0"
+      }
+    },
+    "workbox-broadcast-update": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-broadcast-update/-/workbox-broadcast-update-6.6.0.tgz",
+      "integrity": "sha512-nm+v6QmrIFaB/yokJmQ/93qIJ7n72NICxIwQwe5xsZiV2aI93MGGyEyzOzDPVz5THEr5rC3FJSsO3346cId64Q==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "6.6.0"
+      }
+    },
+    "workbox-build": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-build/-/workbox-build-6.6.0.tgz",
+      "integrity": "sha512-Tjf+gBwOTuGyZwMz2Nk/B13Fuyeo0Q84W++bebbVsfr9iLkDSo6j6PST8tET9HYA58mlRXwlMGpyWO8ETJiXdQ==",
+      "dev": true,
+      "requires": {
+        "@apideck/better-ajv-errors": "^0.3.1",
+        "@babel/core": "^7.11.1",
+        "@babel/preset-env": "^7.11.0",
+        "@babel/runtime": "^7.11.2",
+        "@rollup/plugin-babel": "^5.2.0",
+        "@rollup/plugin-node-resolve": "^11.2.1",
+        "@rollup/plugin-replace": "^2.4.1",
+        "@surma/rollup-plugin-off-main-thread": "^2.2.3",
+        "ajv": "^8.6.0",
+        "common-tags": "^1.8.0",
+        "fast-json-stable-stringify": "^2.1.0",
+        "fs-extra": "^9.0.1",
+        "glob": "^7.1.6",
+        "lodash": "^4.17.20",
+        "pretty-bytes": "^5.3.0",
+        "rollup": "^2.43.1",
+        "rollup-plugin-terser": "^7.0.0",
+        "source-map": "^0.8.0-beta.0",
+        "stringify-object": "^3.3.0",
+        "strip-comments": "^2.0.1",
+        "tempy": "^0.6.0",
+        "upath": "^1.2.0",
+        "workbox-background-sync": "6.6.0",
+        "workbox-broadcast-update": "6.6.0",
+        "workbox-cacheable-response": "6.6.0",
+        "workbox-core": "6.6.0",
+        "workbox-expiration": "6.6.0",
+        "workbox-google-analytics": "6.6.0",
+        "workbox-navigation-preload": "6.6.0",
+        "workbox-precaching": "6.6.0",
+        "workbox-range-requests": "6.6.0",
+        "workbox-recipes": "6.6.0",
+        "workbox-routing": "6.6.0",
+        "workbox-strategies": "6.6.0",
+        "workbox-streams": "6.6.0",
+        "workbox-sw": "6.6.0",
+        "workbox-window": "6.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.8.0-beta.0",
+          "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.8.0-beta.0.tgz",
+          "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
+          "dev": true,
+          "requires": {
+            "whatwg-url": "^7.0.0"
+          }
+        },
+        "tr46": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmmirror.com/tr46/-/tr46-1.0.1.tgz",
+          "integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
+          "dev": true,
+          "requires": {
+            "punycode": "^2.1.0"
+          }
+        },
+        "webidl-conversions": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+          "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
+          "dev": true
+        },
+        "whatwg-url": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-7.1.0.tgz",
+          "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
+          "dev": true,
+          "requires": {
+            "lodash.sortby": "^4.7.0",
+            "tr46": "^1.0.1",
+            "webidl-conversions": "^4.0.2"
+          }
+        }
+      }
+    },
+    "workbox-cacheable-response": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-cacheable-response/-/workbox-cacheable-response-6.6.0.tgz",
+      "integrity": "sha512-JfhJUSQDwsF1Xv3EV1vWzSsCOZn4mQ38bWEBR3LdvOxSPgB65gAM6cS2CX8rkkKHRgiLrN7Wxoyu+TuH67kHrw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "6.6.0"
+      }
+    },
+    "workbox-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-core/-/workbox-core-6.6.0.tgz",
+      "integrity": "sha512-GDtFRF7Yg3DD859PMbPAYPeJyg5gJYXuBQAC+wyrWuuXgpfoOrIQIvFRZnQ7+czTIQjIr1DhLEGFzZanAT/3bQ==",
+      "dev": true
+    },
+    "workbox-expiration": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-expiration/-/workbox-expiration-6.6.0.tgz",
+      "integrity": "sha512-baplYXcDHbe8vAo7GYvyAmlS4f6998Jff513L4XvlzAOxcl8F620O91guoJ5EOf5qeXG4cGdNZHkkVAPouFCpw==",
+      "dev": true,
+      "requires": {
+        "idb": "^7.0.1",
+        "workbox-core": "6.6.0"
+      }
+    },
+    "workbox-google-analytics": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-google-analytics/-/workbox-google-analytics-6.6.0.tgz",
+      "integrity": "sha512-p4DJa6OldXWd6M9zRl0H6vB9lkrmqYFkRQ2xEiNdBFp9U0LhsGO7hsBscVEyH9H2/3eZZt8c97NB2FD9U2NJ+Q==",
+      "dev": true,
+      "requires": {
+        "workbox-background-sync": "6.6.0",
+        "workbox-core": "6.6.0",
+        "workbox-routing": "6.6.0",
+        "workbox-strategies": "6.6.0"
+      }
+    },
+    "workbox-navigation-preload": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-navigation-preload/-/workbox-navigation-preload-6.6.0.tgz",
+      "integrity": "sha512-utNEWG+uOfXdaZmvhshrh7KzhDu/1iMHyQOV6Aqup8Mm78D286ugu5k9MFD9SzBT5TcwgwSORVvInaXWbvKz9Q==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "6.6.0"
+      }
+    },
+    "workbox-precaching": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-precaching/-/workbox-precaching-6.6.0.tgz",
+      "integrity": "sha512-eYu/7MqtRZN1IDttl/UQcSZFkHP7dnvr/X3Vn6Iw6OsPMruQHiVjjomDFCNtd8k2RdjLs0xiz9nq+t3YVBcWPw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "6.6.0",
+        "workbox-routing": "6.6.0",
+        "workbox-strategies": "6.6.0"
+      }
+    },
+    "workbox-range-requests": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-range-requests/-/workbox-range-requests-6.6.0.tgz",
+      "integrity": "sha512-V3aICz5fLGq5DpSYEU8LxeXvsT//mRWzKrfBOIxzIdQnV/Wj7R+LyJVTczi4CQ4NwKhAaBVaSujI1cEjXW+hTw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "6.6.0"
+      }
+    },
+    "workbox-recipes": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-recipes/-/workbox-recipes-6.6.0.tgz",
+      "integrity": "sha512-TFi3kTgYw73t5tg73yPVqQC8QQjxJSeqjXRO4ouE/CeypmP2O/xqmB/ZFBBQazLTPxILUQ0b8aeh0IuxVn9a6A==",
+      "dev": true,
+      "requires": {
+        "workbox-cacheable-response": "6.6.0",
+        "workbox-core": "6.6.0",
+        "workbox-expiration": "6.6.0",
+        "workbox-precaching": "6.6.0",
+        "workbox-routing": "6.6.0",
+        "workbox-strategies": "6.6.0"
+      }
+    },
+    "workbox-routing": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-routing/-/workbox-routing-6.6.0.tgz",
+      "integrity": "sha512-x8gdN7VDBiLC03izAZRfU+WKUXJnbqt6PG9Uh0XuPRzJPpZGLKce/FkOX95dWHRpOHWLEq8RXzjW0O+POSkKvw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "6.6.0"
+      }
+    },
+    "workbox-strategies": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-strategies/-/workbox-strategies-6.6.0.tgz",
+      "integrity": "sha512-eC07XGuINAKUWDnZeIPdRdVja4JQtTuc35TZ8SwMb1ztjp7Ddq2CJ4yqLvWzFWGlYI7CG/YGqaETntTxBGdKgQ==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "6.6.0"
+      }
+    },
+    "workbox-streams": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-streams/-/workbox-streams-6.6.0.tgz",
+      "integrity": "sha512-rfMJLVvwuED09CnH1RnIep7L9+mj4ufkTyDPVaXPKlhi9+0czCu+SJggWCIFbPpJaAZmp2iyVGLqS3RUmY3fxg==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "6.6.0",
+        "workbox-routing": "6.6.0"
+      }
+    },
+    "workbox-sw": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-sw/-/workbox-sw-6.6.0.tgz",
+      "integrity": "sha512-R2IkwDokbtHUE4Kus8pKO5+VkPHD2oqTgl+XJwh4zbF1HyjAbgNmK/FneZHVU7p03XUt9ICfuGDYISWG9qV/CQ==",
+      "dev": true
+    },
+    "workbox-webpack-plugin": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.6.0.tgz",
+      "integrity": "sha512-xNZIZHalboZU66Wa7x1YkjIqEy1gTR+zPM+kjrYJzqN7iurYZBctBLISyScjhkJKYuRrZUP0iqViZTh8rS0+3A==",
+      "dev": true,
+      "requires": {
+        "fast-json-stable-stringify": "^2.1.0",
+        "pretty-bytes": "^5.4.1",
+        "upath": "^1.2.0",
+        "webpack-sources": "^1.4.3",
+        "workbox-build": "6.6.0"
+      },
+      "dependencies": {
+        "webpack-sources": {
+          "version": "1.4.3",
+          "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-1.4.3.tgz",
+          "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
+          "dev": true,
+          "requires": {
+            "source-list-map": "^2.0.0",
+            "source-map": "~0.6.1"
+          }
+        }
+      }
+    },
+    "workbox-window": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmmirror.com/workbox-window/-/workbox-window-6.6.0.tgz",
+      "integrity": "sha512-L4N9+vka17d16geaJXXRjENLFldvkWy7JyGxElRD0JvBxvFEd8LOhr+uXCcar/NzAmIBRv9EZ+M+Qr4mOoBITw==",
+      "dev": true,
+      "requires": {
+        "@types/trusted-types": "^2.0.2",
+        "workbox-core": "6.6.0"
+      }
+    },
+    "wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        }
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "dev": true,
+      "requires": {}
+    },
+    "y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true
+    },
+    "yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true
+    },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmmirror.com/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true
+    },
+    "yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmmirror.com/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "requires": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      }
+    },
+    "yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "dev": true
+    },
+    "zrender": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
+      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..2192739
--- /dev/null
+++ b/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "project",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "@vant/touch-emulator": "^1.4.0",
+    "amfe-flexible": "^2.2.1",
+    "core-js": "^3.8.3",
+    "echarts": "^5.4.3",
+    "echarts-gl": "^2.0.9",
+    "lib-flexible": "^0.3.2",
+    "postcss-preset-env": "^9.3.0",
+    "postcss-pxtorem": "^5.1.1",
+    "register-service-worker": "^1.7.2",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-pwa": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "less": "^4.0.0",
+    "less-loader": "^8.0.0",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..d5f2833
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: {
+    "postcss-pxtorem": {
+      rootValue: 192,
+      propList: ["*"],
+      // 规则是class中包含的字符串，也可以是正则,如ui框架
+      selectorBlackList: ["el-"], //
+    },
+  },
+};
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/img/icons/android-chrome-192x192.png b/public/img/icons/android-chrome-192x192.png
new file mode 100644
index 0000000..b02aa64
Binary files /dev/null and b/public/img/icons/android-chrome-192x192.png differ
diff --git a/public/img/icons/android-chrome-512x512.png b/public/img/icons/android-chrome-512x512.png
new file mode 100644
index 0000000..06088b0
Binary files /dev/null and b/public/img/icons/android-chrome-512x512.png differ
diff --git a/public/img/icons/android-chrome-maskable-192x192.png b/public/img/icons/android-chrome-maskable-192x192.png
new file mode 100644
index 0000000..791e9c8
Binary files /dev/null and b/public/img/icons/android-chrome-maskable-192x192.png differ
diff --git a/public/img/icons/android-chrome-maskable-512x512.png b/public/img/icons/android-chrome-maskable-512x512.png
new file mode 100644
index 0000000..5f2098e
Binary files /dev/null and b/public/img/icons/android-chrome-maskable-512x512.png differ
diff --git a/public/img/icons/apple-touch-icon-120x120.png b/public/img/icons/apple-touch-icon-120x120.png
new file mode 100644
index 0000000..1427cf6
Binary files /dev/null and b/public/img/icons/apple-touch-icon-120x120.png differ
diff --git a/public/img/icons/apple-touch-icon-152x152.png b/public/img/icons/apple-touch-icon-152x152.png
new file mode 100644
index 0000000..f24d454
Binary files /dev/null and b/public/img/icons/apple-touch-icon-152x152.png differ
diff --git a/public/img/icons/apple-touch-icon-180x180.png b/public/img/icons/apple-touch-icon-180x180.png
new file mode 100644
index 0000000..404e192
Binary files /dev/null and b/public/img/icons/apple-touch-icon-180x180.png differ
diff --git a/public/img/icons/apple-touch-icon-60x60.png b/public/img/icons/apple-touch-icon-60x60.png
new file mode 100644
index 0000000..cf10a56
Binary files /dev/null and b/public/img/icons/apple-touch-icon-60x60.png differ
diff --git a/public/img/icons/apple-touch-icon-76x76.png b/public/img/icons/apple-touch-icon-76x76.png
new file mode 100644
index 0000000..c500769
Binary files /dev/null and b/public/img/icons/apple-touch-icon-76x76.png differ
diff --git a/public/img/icons/apple-touch-icon.png b/public/img/icons/apple-touch-icon.png
new file mode 100644
index 0000000..03c0c5d
Binary files /dev/null and b/public/img/icons/apple-touch-icon.png differ
diff --git a/public/img/icons/favicon-16x16.png b/public/img/icons/favicon-16x16.png
new file mode 100644
index 0000000..42af009
Binary files /dev/null and b/public/img/icons/favicon-16x16.png differ
diff --git a/public/img/icons/favicon-32x32.png b/public/img/icons/favicon-32x32.png
new file mode 100644
index 0000000..46ca04d
Binary files /dev/null and b/public/img/icons/favicon-32x32.png differ
diff --git a/public/img/icons/msapplication-icon-144x144.png b/public/img/icons/msapplication-icon-144x144.png
new file mode 100644
index 0000000..7808237
Binary files /dev/null and b/public/img/icons/msapplication-icon-144x144.png differ
diff --git a/public/img/icons/mstile-150x150.png b/public/img/icons/mstile-150x150.png
new file mode 100644
index 0000000..3b37a43
Binary files /dev/null and b/public/img/icons/mstile-150x150.png differ
diff --git a/public/img/icons/safari-pinned-tab.svg b/public/img/icons/safari-pinned-tab.svg
new file mode 100644
index 0000000..e44c0d5
--- /dev/null
+++ b/public/img/icons/safari-pinned-tab.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
+</svg>
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..e17bc69
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+  <meta charset=" utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
+  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..eb05362
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..8a04de8
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,25 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+<script></script>
+<style lang="less">
+* {
+  margin: 0;
+  padding: 0;
+}
+#app {
+  // width: 100vw;
+  // height: 100vh;
+  width: 1920px;
+  height: 1080px;
+  padding-top: 15px;
+  padding-left: 13px;
+  padding-bottom: 13px;
+  padding-right: 13px;
+  box-sizing: border-box;
+  background-color: #04134c;
+  overflow: hidden;
+}
+</style>
diff --git a/src/assets/function.js b/src/assets/function.js
new file mode 100644
index 0000000..0cc587a
--- /dev/null
+++ b/src/assets/function.js
@@ -0,0 +1,9 @@
+export const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/shandong.json b/src/assets/shandong.json
new file mode 100644
index 0000000..f6df4f0
--- /dev/null
+++ b/src/assets/shandong.json
@@ -0,0 +1,7658 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 370100,
+        "name": "济南市",
+        "center": [117.000923, 36.675807],
+        "centroid": [117.221211, 36.640013],
+        "childrenNum": 12,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 0,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [116.546202, 36.40892],
+              [116.528592, 36.387259],
+              [116.519984, 36.384158],
+              [116.503717, 36.369982],
+              [116.484607, 36.336948],
+              [116.449071, 36.337149],
+              [116.441411, 36.321755],
+              [116.430593, 36.318007],
+              [116.406745, 36.319015],
+              [116.374526, 36.3039],
+              [116.331251, 36.290677],
+              [116.322644, 36.284669],
+              [116.310799, 36.270515],
+              [116.307166, 36.259464],
+              [116.28624, 36.239174],
+              [116.280159, 36.221945],
+              [116.255047, 36.203703],
+              [116.234911, 36.180935],
+              [116.226066, 36.173748],
+              [116.246677, 36.149436],
+              [116.261444, 36.122693],
+              [116.27171, 36.109843],
+              [116.273368, 36.093758],
+              [116.267287, 36.074233],
+              [116.267998, 36.052964],
+              [116.271552, 36.043824],
+              [116.294689, 36.031407],
+              [116.301244, 36.031123],
+              [116.304718, 36.046251],
+              [116.310404, 36.052196],
+              [116.324855, 36.054178],
+              [116.338753, 36.060082],
+              [116.352731, 36.070797],
+              [116.360233, 36.084744],
+              [116.386845, 36.090807],
+              [116.398058, 36.084582],
+              [116.401059, 36.074031],
+              [116.409508, 36.068007],
+              [116.427829, 36.067441],
+              [116.433357, 36.059839],
+              [116.429566, 36.052439],
+              [116.436121, 36.046534],
+              [116.434541, 36.038607],
+              [116.449387, 36.047302],
+              [116.452072, 36.058019],
+              [116.471182, 36.06457],
+              [116.504112, 36.064732],
+              [116.532303, 36.074274],
+              [116.543359, 36.086604],
+              [116.546597, 36.101195],
+              [116.554651, 36.108187],
+              [116.566891, 36.108752],
+              [116.569024, 36.118774],
+              [116.562153, 36.121643],
+              [116.5586, 36.133804],
+              [116.543122, 36.13958],
+              [116.525275, 36.135298],
+              [116.528513, 36.145276],
+              [116.519748, 36.141196],
+              [116.507192, 36.141277],
+              [116.510192, 36.148346],
+              [116.52188, 36.157151],
+              [116.525986, 36.168297],
+              [116.51035, 36.176857],
+              [116.502059, 36.192764],
+              [116.481922, 36.197002],
+              [116.472604, 36.21464],
+              [116.487529, 36.228441],
+              [116.485239, 36.236067],
+              [116.506402, 36.240344],
+              [116.512325, 36.253414],
+              [116.525591, 36.255229],
+              [116.53641, 36.245588],
+              [116.552361, 36.247767],
+              [116.558837, 36.261037],
+              [116.574393, 36.263457],
+              [116.581264, 36.255471],
+              [116.587502, 36.268862],
+              [116.600611, 36.273983],
+              [116.609613, 36.291322],
+              [116.632277, 36.296321],
+              [116.649018, 36.295797],
+              [116.675709, 36.276645],
+              [116.686528, 36.275435],
+              [116.701058, 36.280153],
+              [116.710376, 36.279185],
+              [116.732961, 36.294144],
+              [116.762574, 36.305391],
+              [116.772761, 36.312002],
+              [116.786659, 36.311357],
+              [116.808612, 36.299022],
+              [116.830644, 36.294587],
+              [116.855756, 36.301642],
+              [116.855519, 36.289709],
+              [116.867759, 36.28108],
+              [116.873129, 36.264062],
+              [116.891133, 36.255471],
+              [116.928722, 36.26991],
+              [116.932828, 36.261925],
+              [116.950201, 36.257327],
+              [116.956835, 36.259787],
+              [116.975471, 36.243208],
+              [116.987632, 36.250711],
+              [117.002794, 36.254503],
+              [117.003347, 36.265353],
+              [117.027353, 36.268983],
+              [117.030275, 36.277532],
+              [117.0482, 36.283701],
+              [117.051201, 36.288741],
+              [117.066995, 36.296885],
+              [117.074102, 36.296724],
+              [117.077655, 36.307205],
+              [117.07734, 36.321957],
+              [117.088711, 36.346013],
+              [117.107347, 36.338882],
+              [117.111691, 36.340413],
+              [117.137039, 36.335135],
+              [117.142567, 36.345731],
+              [117.161361, 36.351895],
+              [117.179603, 36.353144],
+              [117.18292, 36.360798],
+              [117.180945, 36.37256],
+              [117.191685, 36.378762],
+              [117.200924, 36.389755],
+              [117.208742, 36.405297],
+              [117.218297, 36.406182],
+              [117.242145, 36.41528],
+              [117.249726, 36.436732],
+              [117.263862, 36.449206],
+              [117.275786, 36.451218],
+              [117.288973, 36.468718],
+              [117.288184, 36.476039],
+              [117.30682, 36.472097],
+              [117.30682, 36.467029],
+              [117.335328, 36.466345],
+              [117.346383, 36.46373],
+              [117.346936, 36.455724],
+              [117.339118, 36.438181],
+              [117.339434, 36.425786],
+              [117.344962, 36.403968],
+              [117.35041, 36.393379],
+              [117.351753, 36.377997],
+              [117.362729, 36.360234],
+              [117.387762, 36.337915],
+              [117.38871, 36.326148],
+              [117.379707, 36.315146],
+              [117.38792, 36.296361],
+              [117.387604, 36.285556],
+              [117.397791, 36.283782],
+              [117.394553, 36.266522],
+              [117.413901, 36.267934],
+              [117.417217, 36.243652],
+              [117.392895, 36.237439],
+              [117.393211, 36.222994],
+              [117.399528, 36.215004],
+              [117.412716, 36.210927],
+              [117.427878, 36.221662],
+              [117.447383, 36.218313],
+              [117.447778, 36.203541],
+              [117.452437, 36.203138],
+              [117.440434, 36.191189],
+              [117.446988, 36.18691],
+              [117.461202, 36.170194],
+              [117.475653, 36.173102],
+              [117.487972, 36.15921],
+              [117.476601, 36.150123],
+              [117.469178, 36.154687],
+              [117.459623, 36.1498],
+              [117.44683, 36.120834],
+              [117.463571, 36.116875],
+              [117.454885, 36.111177],
+              [117.456148, 36.100467],
+              [117.447067, 36.09206],
+              [117.451963, 36.087412],
+              [117.473758, 36.089797],
+              [117.484893, 36.10075],
+              [117.491052, 36.096587],
+              [117.505898, 36.098245],
+              [117.534879, 36.111419],
+              [117.547672, 36.106166],
+              [117.552884, 36.087978],
+              [117.561649, 36.079327],
+              [117.575943, 36.074516],
+              [117.601844, 36.075648],
+              [117.630588, 36.059879],
+              [117.656569, 36.049729],
+              [117.689972, 36.052358],
+              [117.701186, 36.04528],
+              [117.720454, 36.038243],
+              [117.725824, 36.029667],
+              [117.741696, 36.036058],
+              [117.757016, 36.019392],
+              [117.750304, 36.011947],
+              [117.756542, 36.002236],
+              [117.756621, 35.991916],
+              [117.762307, 35.990621],
+              [117.781022, 35.995437],
+              [117.782286, 36.007294],
+              [117.794763, 36.015143],
+              [117.801159, 36.012959],
+              [117.825244, 36.013363],
+              [117.828719, 36.008022],
+              [117.841827, 36.011947],
+              [117.854462, 36.006889],
+              [117.866386, 36.007415],
+              [117.877047, 36.016357],
+              [117.895052, 36.020363],
+              [117.914557, 36.020039],
+              [117.922848, 36.015467],
+              [117.926165, 36.005068],
+              [117.935088, 36.004421],
+              [117.937536, 35.99653],
+              [117.950803, 35.996489],
+              [117.94338, 36.017288],
+              [117.949855, 36.018259],
+              [117.946855, 36.04253],
+              [117.932798, 36.052196],
+              [117.935799, 36.061214],
+              [117.948829, 36.062589],
+              [117.94188, 36.071807],
+              [117.946223, 36.08151],
+              [117.953172, 36.081833],
+              [117.954041, 36.090201],
+              [117.946618, 36.100387],
+              [117.939984, 36.094324],
+              [117.931535, 36.094203],
+              [117.921111, 36.110005],
+              [117.923875, 36.1174],
+              [117.91203, 36.132753],
+              [117.914162, 36.140631],
+              [117.90666, 36.152708],
+              [117.917873, 36.16337],
+              [117.912109, 36.171648],
+              [117.903027, 36.172092],
+              [117.915899, 36.192562],
+              [117.914636, 36.200837],
+              [117.921664, 36.203662],
+              [117.928534, 36.196558],
+              [117.943933, 36.207981],
+              [117.959332, 36.204308],
+              [117.967781, 36.21464],
+              [117.96328, 36.224971],
+              [117.96707, 36.248251],
+              [117.975362, 36.262328],
+              [117.972993, 36.268378],
+              [117.943696, 36.274064],
+              [117.932719, 36.271846],
+              [117.926797, 36.277532],
+              [117.93114, 36.283742],
+              [117.922533, 36.300514],
+              [117.924823, 36.313171],
+              [117.918347, 36.317725],
+              [117.919611, 36.324738],
+              [117.933509, 36.334369],
+              [117.933904, 36.341219],
+              [117.915346, 36.352903],
+              [117.902633, 36.352057],
+              [117.893472, 36.339446],
+              [117.89521, 36.359227],
+              [117.890314, 36.366035],
+              [117.882101, 36.35673],
+              [117.879732, 36.370626],
+              [117.867492, 36.386373],
+              [117.859279, 36.389433],
+              [117.855094, 36.412945],
+              [117.829508, 36.417776],
+              [117.826823, 36.427114],
+              [117.833062, 36.44301],
+              [117.822717, 36.44305],
+              [117.817268, 36.436129],
+              [117.799343, 36.432265],
+              [117.7965, 36.43963],
+              [117.786471, 36.434277],
+              [117.779838, 36.441239],
+              [117.755752, 36.445303],
+              [117.763491, 36.452868],
+              [117.757016, 36.459144],
+              [117.765544, 36.469845],
+              [117.748566, 36.478694],
+              [117.757332, 36.484485],
+              [117.755673, 36.496228],
+              [117.743118, 36.498439],
+              [117.735853, 36.504993],
+              [117.751646, 36.509979],
+              [117.765544, 36.509496],
+              [117.76586, 36.512994],
+              [117.750777, 36.524652],
+              [117.742486, 36.525737],
+              [117.739406, 36.539925],
+              [117.72377, 36.54732],
+              [117.720849, 36.560057],
+              [117.694315, 36.568896],
+              [117.696132, 36.575042],
+              [117.706792, 36.581469],
+              [117.715321, 36.578537],
+              [117.706792, 36.593559],
+              [117.715163, 36.600546],
+              [117.697869, 36.599422],
+              [117.690525, 36.604883],
+              [117.705055, 36.605807],
+              [117.706555, 36.611549],
+              [117.714926, 36.610545],
+              [117.715321, 36.627527],
+              [117.70853, 36.635154],
+              [117.712241, 36.642258],
+              [117.709003, 36.651569],
+              [117.698027, 36.652974],
+              [117.695184, 36.666978],
+              [117.701265, 36.685191],
+              [117.715637, 36.691208],
+              [117.718006, 36.697826],
+              [117.71848, 36.704724],
+              [117.739959, 36.721004],
+              [117.736642, 36.729423],
+              [117.747303, 36.748584],
+              [117.724165, 36.755998],
+              [117.695974, 36.754115],
+              [117.687603, 36.763853],
+              [117.677811, 36.783245],
+              [117.648119, 36.805436],
+              [117.608556, 36.821815],
+              [117.580523, 36.85136],
+              [117.577364, 36.862847],
+              [117.579891, 36.878093],
+              [117.585024, 36.886815],
+              [117.58376, 36.894176],
+              [117.56923, 36.915736],
+              [117.534248, 36.931611],
+              [117.539538, 36.941486],
+              [117.551305, 36.93385],
+              [117.553674, 36.940727],
+              [117.56465, 36.945084],
+              [117.56544, 36.959954],
+              [117.54933, 36.96507],
+              [117.555253, 36.970785],
+              [117.549094, 36.979817],
+              [117.536854, 36.978498],
+              [117.519875, 36.957117],
+              [117.509847, 36.969267],
+              [117.494527, 36.972344],
+              [117.476522, 36.968348],
+              [117.477628, 36.961154],
+              [117.458754, 36.957676],
+              [117.444461, 36.958116],
+              [117.416901, 36.95264],
+              [117.414927, 36.957236],
+              [117.406162, 36.950001],
+              [117.40403, 36.955038],
+              [117.391632, 36.952],
+              [117.378286, 36.956997],
+              [117.365335, 36.99496],
+              [117.35349, 37.003349],
+              [117.328457, 37.011218],
+              [117.317323, 37.020923],
+              [117.315349, 37.030547],
+              [117.326088, 37.036178],
+              [117.33667, 37.046838],
+              [117.339434, 37.056419],
+              [117.336433, 37.073941],
+              [117.365256, 37.069272],
+              [117.391158, 37.083479],
+              [117.409241, 37.089425],
+              [117.442092, 37.093574],
+              [117.459781, 37.109931],
+              [117.455596, 37.11767],
+              [117.4507, 37.143711],
+              [117.4507, 37.153957],
+              [117.444066, 37.156868],
+              [117.442724, 37.170859],
+              [117.436091, 37.184251],
+              [117.417928, 37.20003],
+              [117.404977, 37.21716],
+              [117.402371, 37.224808],
+              [117.408768, 37.239703],
+              [117.429141, 37.239783],
+              [117.424403, 37.243367],
+              [117.431037, 37.254396],
+              [117.443908, 37.250056],
+              [117.438302, 37.25786],
+              [117.43688, 37.27235],
+              [117.432379, 37.272032],
+              [117.430168, 37.285166],
+              [117.417612, 37.296587],
+              [117.409005, 37.321692],
+              [117.413901, 37.349333],
+              [117.407741, 37.353667],
+              [117.415401, 37.364203],
+              [117.401029, 37.379071],
+              [117.368652, 37.396399],
+              [117.360202, 37.405697],
+              [117.368257, 37.419563],
+              [117.369758, 37.436048],
+              [117.353332, 37.450901],
+              [117.309189, 37.447486],
+              [117.295449, 37.4538],
+              [117.307768, 37.46194],
+              [117.304609, 37.466069],
+              [117.283998, 37.471587],
+              [117.285894, 37.479328],
+              [117.312585, 37.487068],
+              [117.317718, 37.499371],
+              [117.307215, 37.507744],
+              [117.286525, 37.510046],
+              [117.284393, 37.522266],
+              [117.275549, 37.526193],
+              [117.273417, 37.532619],
+              [117.260861, 37.530081],
+              [117.238197, 37.532897],
+              [117.230063, 37.528891],
+              [117.22114, 37.51318],
+              [117.199345, 37.487148],
+              [117.176049, 37.486116],
+              [117.163809, 37.478971],
+              [117.135618, 37.475239],
+              [117.124878, 37.483853],
+              [117.109795, 37.47901],
+              [117.098819, 37.469721],
+              [117.104978, 37.455309],
+              [117.102293, 37.445778],
+              [117.089264, 37.435055],
+              [117.038408, 37.435452],
+              [117.03067, 37.442958],
+              [117.01843, 37.435849],
+              [117.012112, 37.419643],
+              [117.019693, 37.405379],
+              [117.008164, 37.392464],
+              [116.99924, 37.376964],
+              [117.009664, 37.359671],
+              [117.006663, 37.355138],
+              [116.987158, 37.342692],
+              [116.986684, 37.335335],
+              [116.993397, 37.32201],
+              [117.002241, 37.285962],
+              [117.024273, 37.278918],
+              [117.038961, 37.266538],
+              [117.030275, 37.264229],
+              [117.032328, 37.253241],
+              [117.041251, 37.247667],
+              [117.042673, 37.238867],
+              [117.036592, 37.237393],
+              [117.03596, 37.224091],
+              [117.022299, 37.215089],
+              [117.037777, 37.207361],
+              [117.037382, 37.195169],
+              [117.045358, 37.197161],
+              [117.05744, 37.192141],
+              [117.06352, 37.182656],
+              [117.061783, 37.16496],
+              [117.050648, 37.160894],
+              [117.054676, 37.141717],
+              [117.059809, 37.137251],
+              [117.047411, 37.134739],
+              [117.044884, 37.122615],
+              [117.024273, 37.119664],
+              [117.004531, 37.121219],
+              [116.982578, 37.113601],
+              [116.931486, 37.100477],
+              [116.919009, 37.093056],
+              [116.91972, 37.081364],
+              [116.925247, 37.069831],
+              [116.928643, 37.05103],
+              [116.944279, 37.042327],
+              [116.948701, 37.036537],
+              [116.943173, 37.030907],
+              [116.907796, 37.019046],
+              [116.891607, 37.00271],
+              [116.875024, 36.999274],
+              [116.885764, 36.991444],
+              [116.886158, 36.983573],
+              [116.899188, 36.977499],
+              [116.897767, 36.962712],
+              [116.907717, 36.963272],
+              [116.933381, 36.959595],
+              [116.931881, 36.946204],
+              [116.935434, 36.93457],
+              [116.922563, 36.93453],
+              [116.934408, 36.925973],
+              [116.957466, 36.916495],
+              [116.963152, 36.893896],
+              [116.96181, 36.867529],
+              [116.962836, 36.842674],
+              [116.948069, 36.839231],
+              [116.9442, 36.844916],
+              [116.934724, 36.845116],
+              [116.935908, 36.829743],
+              [116.933223, 36.823697],
+              [116.919404, 36.822776],
+              [116.892476, 36.830023],
+              [116.887106, 36.833427],
+              [116.882447, 36.824058],
+              [116.887975, 36.811404],
+              [116.872813, 36.812004],
+              [116.868233, 36.801872],
+              [116.865548, 36.777877],
+              [116.87076, 36.759164],
+              [116.883868, 36.758243],
+              [116.88679, 36.745538],
+              [116.873997, 36.739846],
+              [116.861757, 36.730345],
+              [116.842489, 36.72786],
+              [116.830881, 36.723851],
+              [116.802768, 36.706729],
+              [116.799689, 36.694417],
+              [116.780657, 36.691048],
+              [116.780736, 36.671552],
+              [116.777262, 36.660718],
+              [116.763126, 36.651971],
+              [116.759494, 36.632746],
+              [116.742042, 36.620381],
+              [116.71314, 36.608858],
+              [116.693319, 36.607895],
+              [116.694345, 36.591149],
+              [116.682421, 36.580586],
+              [116.661258, 36.578376],
+              [116.662916, 36.563111],
+              [116.658968, 36.553026],
+              [116.646728, 36.544105],
+              [116.629592, 36.544587],
+              [116.622801, 36.532651],
+              [116.60835, 36.52011],
+              [116.610087, 36.51609],
+              [116.627223, 36.508853],
+              [116.624301, 36.497233],
+              [116.602032, 36.495223],
+              [116.593267, 36.485973],
+              [116.595636, 36.480383],
+              [116.613009, 36.473425],
+              [116.611429, 36.459104],
+              [116.620905, 36.44144],
+              [116.6198, 36.428522],
+              [116.612377, 36.42333],
+              [116.591213, 36.416286],
+              [116.546202, 36.40892]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 370200,
+        "name": "青岛市",
+        "center": [120.355173, 36.082982],
+        "centroid": [120.150883, 36.451227],
+        "childrenNum": 10,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 1,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [120.850108, 36.612271],
+              [120.786223, 36.589663],
+              [120.779747, 36.591551],
+              [120.777062, 36.600546],
+              [120.765533, 36.607011],
+              [120.757557, 36.606088],
+              [120.751556, 36.615042],
+              [120.725733, 36.624436],
+              [120.708281, 36.621385],
+              [120.70836, 36.612914],
+              [120.699121, 36.60665],
+              [120.702991, 36.598338],
+              [120.679695, 36.589181],
+              [120.665402, 36.587454],
+              [120.664059, 36.583478],
+              [120.637763, 36.574199],
+              [120.635947, 36.597775],
+              [120.643449, 36.613436],
+              [120.644712, 36.626524],
+              [120.657426, 36.626644],
+              [120.660585, 36.647998],
+              [120.648977, 36.655863],
+              [120.652135, 36.663327],
+              [120.642027, 36.666095],
+              [120.627339, 36.659836],
+              [120.625128, 36.671231],
+              [120.631446, 36.673357],
+              [120.619206, 36.681541],
+              [120.616521, 36.689764],
+              [120.589751, 36.694497],
+              [120.586118, 36.698829],
+              [120.596542, 36.708052],
+              [120.58525, 36.728501],
+              [120.584065, 36.735236],
+              [120.562586, 36.736479],
+              [120.560375, 36.742492],
+              [120.546397, 36.744616],
+              [120.544502, 36.76213],
+              [120.540791, 36.7679],
+              [120.5554, 36.778718],
+              [120.56377, 36.795343],
+              [120.563454, 36.802953],
+              [120.590382, 36.801552],
+              [120.601517, 36.804996],
+              [120.612336, 36.829223],
+              [120.609809, 36.832906],
+              [120.589751, 36.838791],
+              [120.58754, 36.843635],
+              [120.595989, 36.852681],
+              [120.588408, 36.859045],
+              [120.57988, 36.858885],
+              [120.576642, 36.879894],
+              [120.592909, 36.882134],
+              [120.622838, 36.890856],
+              [120.622838, 36.907377],
+              [120.617389, 36.911136],
+              [120.592909, 36.912216],
+              [120.574984, 36.927053],
+              [120.571114, 36.948682],
+              [120.563218, 36.95172],
+              [120.560296, 36.960674],
+              [120.566534, 36.96559],
+              [120.568508, 36.983293],
+              [120.574036, 36.987568],
+              [120.575931, 36.999074],
+              [120.582328, 37.001791],
+              [120.593857, 36.991244],
+              [120.606413, 37.001192],
+              [120.601754, 37.012696],
+              [120.613915, 37.023839],
+              [120.606176, 37.047157],
+              [120.586513, 37.048515],
+              [120.58446, 37.058136],
+              [120.570877, 37.046399],
+              [120.558953, 37.047437],
+              [120.549793, 37.041288],
+              [120.541738, 37.044163],
+              [120.533289, 37.053944],
+              [120.539843, 37.060371],
+              [120.536368, 37.081963],
+              [120.547661, 37.113003],
+              [120.542528, 37.128677],
+              [120.527998, 37.136733],
+              [120.527129, 37.143352],
+              [120.517258, 37.148974],
+              [120.506834, 37.148854],
+              [120.505729, 37.143551],
+              [120.493805, 37.1345],
+              [120.493015, 37.126723],
+              [120.478643, 37.124211],
+              [120.462928, 37.115157],
+              [120.440265, 37.122655],
+              [120.439475, 37.116912],
+              [120.415153, 37.110569],
+              [120.407098, 37.112803],
+              [120.412942, 37.103149],
+              [120.408914, 37.09517],
+              [120.398096, 37.096447],
+              [120.388225, 37.104227],
+              [120.369667, 37.104626],
+              [120.362244, 37.100477],
+              [120.357822, 37.084357],
+              [120.348583, 37.077094],
+              [120.34574, 37.087789],
+              [120.336343, 37.092058],
+              [120.336896, 37.104267],
+              [120.331684, 37.111966],
+              [120.320628, 37.10654],
+              [120.315337, 37.113043],
+              [120.300176, 37.119584],
+              [120.303413, 37.130153],
+              [120.280828, 37.13111],
+              [120.264087, 37.114718],
+              [120.245688, 37.118906],
+              [120.236606, 37.125965],
+              [120.231237, 37.106301],
+              [120.229894, 37.089544],
+              [120.220497, 37.08711],
+              [120.214101, 37.07019],
+              [120.21647, 37.056699],
+              [120.205335, 37.038374],
+              [120.193411, 37.034261],
+              [120.189621, 37.038094],
+              [120.180697, 37.032544],
+              [120.173037, 37.034421],
+              [120.166404, 37.025795],
+              [120.167273, 37.017968],
+              [120.159929, 37.013375],
+              [120.142319, 37.015292],
+              [120.138134, 37.022201],
+              [120.123051, 37.01645],
+              [120.101571, 37.014293],
+              [120.09249, 37.017928],
+              [120.049374, 37.020045],
+              [120.035238, 36.998395],
+              [120.024104, 36.999913],
+              [120.002309, 37.013494],
+              [119.993543, 37.012176],
+              [119.980198, 37.018088],
+              [119.975618, 37.011098],
+              [119.961561, 37.013654],
+              [119.949716, 37.006185],
+              [119.939608, 37.004108],
+              [119.923341, 36.993961],
+              [119.902257, 36.9948],
+              [119.900045, 36.997556],
+              [119.85148, 37.002031],
+              [119.829606, 37.002031],
+              [119.820209, 36.999594],
+              [119.804968, 37.013814],
+              [119.771881, 37.006984],
+              [119.769906, 36.996597],
+              [119.750559, 36.990844],
+              [119.743057, 36.992483],
+              [119.731133, 36.988487],
+              [119.722289, 36.993401],
+              [119.716998, 37.007144],
+              [119.681699, 36.998475],
+              [119.66251, 37.008262],
+              [119.629344, 37.01621],
+              [119.61971, 37.012895],
+              [119.619078, 37.017848],
+              [119.60976, 37.013894],
+              [119.604548, 36.996038],
+              [119.598072, 36.989406],
+              [119.5837, 36.950441],
+              [119.599968, 36.920614],
+              [119.599652, 36.878253],
+              [119.597757, 36.857244],
+              [119.56767, 36.805717],
+              [119.563721, 36.802753],
+              [119.550613, 36.80868],
+              [119.539162, 36.799949],
+              [119.539162, 36.787732],
+              [119.532766, 36.78008],
+              [119.530555, 36.765256],
+              [119.534977, 36.743333],
+              [119.547059, 36.725454],
+              [119.561036, 36.720884],
+              [119.567433, 36.713065],
+              [119.579831, 36.711581],
+              [119.587412, 36.696101],
+              [119.596651, 36.689884],
+              [119.607154, 36.667379],
+              [119.61355, 36.66453],
+              [119.617025, 36.652532],
+              [119.625079, 36.638807],
+              [119.651297, 36.623633],
+              [119.670328, 36.616246],
+              [119.681857, 36.606891],
+              [119.701125, 36.602634],
+              [119.730107, 36.581027],
+              [119.72758, 36.562749],
+              [119.74748, 36.571788],
+              [119.755929, 36.565521],
+              [119.784516, 36.554673],
+              [119.798019, 36.551619],
+              [119.826763, 36.54101],
+              [119.917576, 36.525858],
+              [119.920261, 36.522079],
+              [119.923025, 36.495464],
+              [119.936687, 36.496389],
+              [119.936292, 36.511507],
+              [119.951375, 36.519788],
+              [119.971985, 36.522441],
+              [119.974749, 36.515688],
+              [119.997571, 36.504431],
+              [120.010364, 36.509255],
+              [120.004204, 36.489512],
+              [120.010758, 36.484445],
+              [120.004125, 36.477447],
+              [120.006889, 36.468799],
+              [120.012812, 36.467833],
+              [120.011864, 36.454236],
+              [119.996623, 36.446309],
+              [119.994175, 36.450333],
+              [119.968432, 36.450051],
+              [119.953981, 36.444217],
+              [119.949795, 36.446511],
+              [119.935976, 36.427436],
+              [119.933923, 36.42007],
+              [119.925236, 36.419346],
+              [119.926421, 36.403324],
+              [119.941425, 36.39503],
+              [119.945452, 36.384682],
+              [119.936371, 36.380655],
+              [119.93029, 36.385165],
+              [119.909837, 36.384359],
+              [119.90431, 36.38154],
+              [119.904784, 36.369942],
+              [119.895939, 36.34827],
+              [119.896966, 36.334047],
+              [119.891991, 36.318773],
+              [119.865379, 36.308898],
+              [119.862773, 36.302368],
+              [119.854402, 36.302328],
+              [119.848795, 36.292692],
+              [119.83387, 36.278822],
+              [119.82929, 36.258859],
+              [119.820446, 36.257367],
+              [119.82092, 36.244499],
+              [119.808048, 36.232839],
+              [119.819498, 36.211856],
+              [119.828816, 36.210685],
+              [119.823131, 36.19894],
+              [119.831738, 36.180612],
+              [119.82242, 36.177987],
+              [119.821315, 36.171285],
+              [119.81326, 36.175242],
+              [119.813023, 36.167691],
+              [119.792333, 36.171648],
+              [119.782778, 36.165308],
+              [119.772354, 36.167691],
+              [119.748111, 36.158645],
+              [119.733818, 36.163572],
+              [119.732792, 36.172536],
+              [119.723473, 36.175565],
+              [119.691728, 36.176292],
+              [119.681305, 36.18045],
+              [119.671039, 36.177866],
+              [119.660852, 36.154122],
+              [119.649954, 36.137157],
+              [119.651218, 36.130531],
+              [119.643716, 36.127178],
+              [119.657614, 36.108631],
+              [119.657061, 36.100872],
+              [119.632187, 36.091535],
+              [119.633608, 36.067683],
+              [119.666695, 36.062993],
+              [119.675698, 36.064085],
+              [119.695677, 36.053045],
+              [119.704126, 36.055269],
+              [119.717314, 36.044229],
+              [119.706495, 36.028292],
+              [119.681068, 36.012068],
+              [119.689122, 36.000212],
+              [119.684858, 35.982648],
+              [119.690149, 35.963702],
+              [119.701757, 35.944469],
+              [119.701362, 35.923732],
+              [119.716208, 35.927337],
+              [119.721262, 35.906718],
+              [119.727738, 35.902544],
+              [119.738003, 35.873123],
+              [119.736898, 35.86303],
+              [119.72221, 35.865138],
+              [119.725211, 35.856746],
+              [119.71834, 35.853138],
+              [119.704047, 35.863962],
+              [119.68699, 35.861814],
+              [119.676014, 35.842515],
+              [119.664326, 35.841015],
+              [119.649796, 35.845191],
+              [119.629344, 35.833878],
+              [119.622631, 35.816114],
+              [119.612445, 35.812707],
+              [119.60897, 35.799279],
+              [119.617972, 35.789623],
+              [119.611576, 35.776597],
+              [119.596256, 35.773756],
+              [119.591992, 35.753218],
+              [119.605495, 35.747454],
+              [119.627843, 35.722077],
+              [119.624685, 35.712817],
+              [119.614182, 35.716675],
+              [119.601231, 35.709446],
+              [119.588833, 35.715701],
+              [119.576988, 35.71237],
+              [119.566485, 35.714523],
+              [119.560563, 35.721752],
+              [119.545085, 35.726747],
+              [119.527317, 35.723214],
+              [119.525422, 35.730604],
+              [119.517762, 35.723742],
+              [119.521079, 35.716879],
+              [119.518473, 35.700632],
+              [119.51484, 35.697992],
+              [119.519105, 35.68552],
+              [119.528265, 35.674305],
+              [119.524474, 35.632279],
+              [119.517762, 35.625774],
+              [119.518157, 35.615446],
+              [119.536872, 35.606011],
+              [119.538215, 35.589294],
+              [119.556535, 35.592508],
+              [119.57762, 35.586243],
+              [119.592308, 35.600683],
+              [119.600599, 35.590271],
+              [119.609286, 35.59202],
+              [119.614972, 35.606336],
+              [119.634713, 35.598731],
+              [119.651455, 35.588766],
+              [119.662115, 35.589294],
+              [119.682173, 35.590027],
+              [119.717946, 35.615649],
+              [119.729949, 35.618943],
+              [119.751349, 35.617845],
+              [119.752849, 35.588684],
+              [119.762483, 35.578351],
+              [119.76967, 35.577212],
+              [119.780172, 35.58486],
+              [119.786174, 35.576073],
+              [119.800862, 35.581891],
+              [119.792649, 35.59385],
+              [119.800467, 35.59869],
+              [119.802994, 35.609183],
+              [119.792649, 35.615446],
+              [119.802204, 35.620244],
+              [119.800625, 35.626465],
+              [119.818472, 35.63858],
+              [119.824315, 35.646304],
+              [119.829606, 35.643702],
+              [119.831422, 35.618333],
+              [119.844768, 35.623619],
+              [119.851717, 35.622074],
+              [119.868379, 35.608817],
+              [119.877619, 35.610972],
+              [119.894597, 35.628742],
+              [119.902493, 35.63297],
+              [119.925157, 35.63736],
+              [119.927921, 35.65045],
+              [119.912285, 35.660651],
+              [119.910864, 35.674305],
+              [119.923894, 35.696529],
+              [119.94482, 35.705506],
+              [119.952954, 35.713142],
+              [119.953349, 35.72561],
+              [119.949321, 35.729873],
+              [119.930369, 35.728899],
+              [119.920735, 35.737548],
+              [119.924841, 35.758252],
+              [119.937081, 35.763407],
+              [119.959982, 35.759104],
+              [119.969932, 35.749078],
+              [119.967879, 35.74108],
+              [119.978461, 35.739496],
+              [119.986041, 35.729711],
+              [119.981224, 35.715335],
+              [120.001519, 35.720209],
+              [120.011074, 35.713223],
+              [120.020235, 35.722239],
+              [120.031369, 35.752244],
+              [120.037529, 35.753908],
+              [120.03745, 35.763041],
+              [120.043135, 35.776759],
+              [120.049453, 35.782278],
+              [120.041319, 35.799198],
+              [120.033264, 35.806013],
+              [120.036423, 35.824753],
+              [120.062798, 35.87134],
+              [120.07875, 35.885768],
+              [120.084041, 35.880378],
+              [120.102203, 35.881918],
+              [120.118392, 35.888524],
+              [120.123998, 35.895291],
+              [120.12542, 35.906718],
+              [120.135843, 35.905421],
+              [120.142714, 35.909392],
+              [120.141924, 35.919438],
+              [120.147768, 35.907852],
+              [120.15677, 35.909149],
+              [120.167983, 35.918426],
+              [120.179276, 35.936653],
+              [120.207862, 35.947344],
+              [120.210784, 35.938435],
+              [120.194438, 35.93402],
+              [120.184172, 35.915671],
+              [120.172169, 35.904408],
+              [120.169405, 35.888565],
+              [120.185198, 35.88747],
+              [120.202098, 35.89205],
+              [120.204388, 35.910404],
+              [120.209284, 35.917616],
+              [120.222076, 35.924947],
+              [120.233132, 35.941553],
+              [120.246477, 35.947466],
+              [120.251531, 35.95937],
+              [120.261718, 35.965484],
+              [120.284619, 35.965565],
+              [120.305072, 35.97184],
+              [120.316522, 36.002155],
+              [120.309494, 36.014132],
+              [120.291173, 36.017611],
+              [120.27459, 36.004664],
+              [120.278775, 35.996368],
+              [120.271273, 35.99394],
+              [120.265588, 36.001062],
+              [120.254927, 35.980826],
+              [120.247662, 35.982567],
+              [120.248768, 35.992078],
+              [120.256427, 36.005433],
+              [120.265509, 36.014011],
+              [120.25698, 36.024813],
+              [120.244977, 36.020444],
+              [120.213232, 35.998351],
+              [120.19886, 35.99572],
+              [120.223577, 36.016398],
+              [120.223656, 36.022385],
+              [120.23479, 36.030638],
+              [120.230605, 36.044916],
+              [120.24095, 36.047828],
+              [120.241345, 36.060445],
+              [120.231868, 36.063842],
+              [120.19499, 36.064206],
+              [120.181645, 36.066511],
+              [120.173906, 36.077225],
+              [120.161903, 36.082682],
+              [120.152111, 36.095254],
+              [120.116891, 36.102852],
+              [120.116023, 36.114046],
+              [120.1086, 36.12742],
+              [120.128105, 36.129723],
+              [120.142556, 36.143539],
+              [120.140345, 36.173304],
+              [120.164351, 36.188767],
+              [120.181566, 36.203945],
+              [120.20723, 36.211613],
+              [120.217338, 36.211412],
+              [120.224445, 36.19131],
+              [120.235027, 36.189211],
+              [120.244819, 36.199384],
+              [120.260929, 36.198415],
+              [120.262982, 36.182267],
+              [120.276564, 36.185699],
+              [120.28075, 36.17932],
+              [120.291489, 36.185941],
+              [120.310283, 36.185295],
+              [120.313205, 36.196316],
+              [120.29828, 36.203783],
+              [120.293305, 36.219241],
+              [120.297412, 36.225455],
+              [120.319997, 36.232234],
+              [120.336896, 36.213954],
+              [120.35877, 36.200312],
+              [120.369509, 36.177745],
+              [120.358217, 36.174757],
+              [120.356953, 36.166076],
+              [120.347004, 36.155818],
+              [120.333658, 36.134652],
+              [120.326235, 36.111662],
+              [120.317549, 36.108106],
+              [120.312653, 36.100185],
+              [120.311231, 36.087614],
+              [120.30136, 36.071282],
+              [120.290147, 36.060526],
+              [120.286119, 36.047181],
+              [120.297649, 36.045361],
+              [120.296069, 36.052439],
+              [120.307993, 36.050214],
+              [120.315969, 36.059677],
+              [120.324814, 36.059515],
+              [120.324577, 36.051104],
+              [120.337527, 36.054986],
+              [120.342897, 36.05167],
+              [120.337922, 36.044633],
+              [120.345661, 36.043541],
+              [120.35798, 36.04892],
+              [120.365166, 36.041398],
+              [120.371089, 36.044835],
+              [120.37022, 36.053409],
+              [120.389172, 36.059394],
+              [120.38783, 36.051711],
+              [120.404413, 36.051589],
+              [120.415311, 36.057413],
+              [120.42226, 36.054986],
+              [120.437185, 36.0655],
+              [120.441923, 36.063236],
+              [120.449662, 36.07302],
+              [120.467587, 36.087169],
+              [120.479827, 36.091656],
+              [120.497832, 36.08624],
+              [120.526261, 36.093435],
+              [120.547345, 36.092141],
+              [120.552241, 36.097881],
+              [120.547187, 36.10952],
+              [120.567087, 36.105964],
+              [120.573325, 36.114248],
+              [120.580827, 36.111419],
+              [120.579248, 36.103943],
+              [120.599859, 36.101801],
+              [120.607834, 36.107217],
+              [120.612099, 36.117521],
+              [120.621259, 36.119259],
+              [120.632235, 36.113319],
+              [120.650951, 36.117885],
+              [120.672667, 36.129844],
+              [120.695647, 36.123744],
+              [120.71223, 36.126572],
+              [120.719811, 36.13441],
+              [120.716257, 36.142085],
+              [120.705439, 36.139702],
+              [120.704333, 36.152344],
+              [120.698332, 36.158887],
+              [120.707018, 36.159331],
+              [120.707255, 36.165066],
+              [120.697147, 36.168579],
+              [120.693041, 36.190624],
+              [120.696752, 36.204026],
+              [120.689171, 36.230176],
+              [120.681038, 36.238932],
+              [120.689724, 36.251437],
+              [120.685855, 36.260231],
+              [120.686249, 36.279104],
+              [120.677326, 36.281443],
+              [120.659716, 36.27483],
+              [120.65482, 36.27983],
+              [120.656005, 36.28862],
+              [120.665718, 36.29749],
+              [120.66635, 36.309342],
+              [120.656005, 36.322158],
+              [120.663033, 36.33179],
+              [120.692093, 36.325544],
+              [120.707966, 36.328929],
+              [120.73821, 36.32373],
+              [120.744449, 36.328163],
+              [120.739632, 36.3386],
+              [120.729603, 36.349801],
+              [120.72676, 36.359831],
+              [120.716494, 36.360516],
+              [120.709703, 36.368089],
+              [120.700385, 36.37123],
+              [120.694383, 36.390158],
+              [120.71144, 36.408678],
+              [120.72597, 36.413912],
+              [120.726997, 36.422928],
+              [120.736868, 36.432829],
+              [120.751003, 36.431299],
+              [120.760084, 36.434559],
+              [120.761664, 36.443211],
+              [120.756768, 36.458098],
+              [120.759453, 36.462604],
+              [120.828471, 36.466627],
+              [120.843001, 36.457736],
+              [120.842369, 36.441601],
+              [120.838342, 36.436974],
+              [120.858952, 36.424578],
+              [120.859505, 36.412422],
+              [120.851134, 36.406021],
+              [120.854925, 36.381903],
+              [120.87443, 36.373244],
+              [120.872061, 36.367001],
+              [120.895909, 36.376104],
+              [120.891645, 36.389675],
+              [120.903332, 36.406142],
+              [120.918415, 36.418742],
+              [120.927812, 36.410047],
+              [120.935077, 36.421036],
+              [120.925522, 36.419909],
+              [120.91881, 36.425383],
+              [120.917388, 36.435364],
+              [120.907833, 36.445987],
+              [120.920152, 36.455201],
+              [120.934524, 36.454678],
+              [120.938315, 36.44812],
+              [120.947238, 36.449287],
+              [120.952371, 36.459184],
+              [120.963585, 36.464334],
+              [120.967691, 36.47797],
+              [120.954977, 36.489311],
+              [120.95861, 36.498721],
+              [120.954345, 36.507567],
+              [120.962716, 36.519225],
+              [120.983958, 36.540809],
+              [120.983326, 36.545913],
+              [120.969349, 36.559495],
+              [120.962163, 36.562789],
+              [120.936341, 36.56532],
+              [120.923785, 36.572029],
+              [120.91265, 36.568414],
+              [120.893382, 36.57918],
+              [120.891961, 36.58898],
+              [120.884854, 36.60143],
+              [120.86598, 36.605606],
+              [120.850108, 36.612271]
+            ]
+          ],
+          [
+            [
+              [120.584381, 36.096183],
+              [120.579485, 36.091535],
+              [120.595042, 36.090282],
+              [120.587461, 36.099457],
+              [120.584381, 36.096183]
+            ]
+          ],
+          [
+            [
+              [120.990039, 36.413348],
+              [120.978115, 36.428643],
+              [120.969823, 36.431581],
+              [120.9639, 36.424618],
+              [120.948502, 36.421117],
+              [120.950318, 36.414757],
+              [120.963663, 36.41363],
+              [120.981431, 36.417494],
+              [120.990039, 36.413348]
+            ]
+          ],
+          [
+            [
+              [121.004253, 36.488306],
+              [120.989881, 36.492367],
+              [120.988538, 36.485249],
+              [121.004253, 36.488306]
+            ]
+          ],
+          [
+            [
+              [120.877352, 35.89359],
+              [120.875377, 35.888443],
+              [120.888802, 35.897277],
+              [120.877352, 35.89359]
+            ]
+          ],
+          [
+            [
+              [119.73524, 35.595762],
+              [119.741873, 35.583884],
+              [119.743689, 35.591328],
+              [119.738872, 35.599666],
+              [119.73524, 35.595762]
+            ]
+          ],
+          [
+            [
+              [120.158823, 35.76499],
+              [120.155428, 35.751838],
+              [120.158665, 35.744896],
+              [120.173037, 35.741405],
+              [120.187962, 35.748712],
+              [120.192858, 35.757156],
+              [120.184725, 35.766978],
+              [120.180539, 35.788649],
+              [120.17209, 35.785727],
+              [120.158823, 35.76499]
+            ]
+          ],
+          [
+            [
+              [120.775088, 36.237963],
+              [120.76806, 36.230701],
+              [120.777457, 36.222308],
+              [120.775088, 36.237963]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 370300,
+        "name": "淄博市",
+        "center": [118.047648, 36.814939],
+        "centroid": [118.058673, 36.610971],
+        "childrenNum": 8,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 2,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [117.988471, 35.947709],
+              [118.021084, 35.949004],
+              [118.02298, 35.958965],
+              [118.03293, 35.964998],
+              [118.032693, 35.974268],
+              [118.042248, 35.986371],
+              [118.058989, 35.992968],
+              [118.066807, 36.009155],
+              [118.075888, 36.009034],
+              [118.078415, 36.017652],
+              [118.084338, 36.012149],
+              [118.093261, 36.014618],
+              [118.096104, 36.024246],
+              [118.10937, 36.030031],
+              [118.132666, 36.030436],
+              [118.135588, 36.02364],
+              [118.178388, 36.017005],
+              [118.197578, 36.004947],
+              [118.206106, 35.97864],
+              [118.193787, 35.974026],
+              [118.207054, 35.964391],
+              [118.209897, 35.955767],
+              [118.22569, 35.948235],
+              [118.236351, 35.947749],
+              [118.236904, 35.939245],
+              [118.245906, 35.932157],
+              [118.257119, 35.930699],
+              [118.257593, 35.925717],
+              [118.26928, 35.928512],
+              [118.281362, 35.935964],
+              [118.293523, 35.937503],
+              [118.303552, 35.948923],
+              [118.314134, 35.950827],
+              [118.320136, 35.946575],
+              [118.344774, 35.955888],
+              [118.352828, 35.956698],
+              [118.360725, 35.970908],
+              [118.382283, 35.975078],
+              [118.387021, 35.987586],
+              [118.415213, 35.990783],
+              [118.430612, 35.969694],
+              [118.459356, 35.952689],
+              [118.470964, 35.960868],
+              [118.502157, 35.962488],
+              [118.505157, 35.965808],
+              [118.499393, 35.976212],
+              [118.486521, 35.988759],
+              [118.49268, 35.995437],
+              [118.487074, 36.005797],
+              [118.476571, 36.012797],
+              [118.469859, 36.022992],
+              [118.476097, 36.031407],
+              [118.489206, 36.025784],
+              [118.503341, 36.024246],
+              [118.507447, 36.029789],
+              [118.516845, 36.026107],
+              [118.522609, 36.043622],
+              [118.522214, 36.05349],
+              [118.513449, 36.064085],
+              [118.516608, 36.068573],
+              [118.507842, 36.074961],
+              [118.496866, 36.067683],
+              [118.48044, 36.074071],
+              [118.482099, 36.092546],
+              [118.478545, 36.098245],
+              [118.484468, 36.104064],
+              [118.479493, 36.118814],
+              [118.492601, 36.127057],
+              [118.487863, 36.131784],
+              [118.462594, 36.14059],
+              [118.457303, 36.13247],
+              [118.447116, 36.140913],
+              [118.440956, 36.132511],
+              [118.428953, 36.132672],
+              [118.412844, 36.127218],
+              [118.402183, 36.131622],
+              [118.405263, 36.141641],
+              [118.402262, 36.162926],
+              [118.387653, 36.174555],
+              [118.374387, 36.203097],
+              [118.382046, 36.207335],
+              [118.386548, 36.239053],
+              [118.379756, 36.245265],
+              [118.368385, 36.248412],
+              [118.350775, 36.263538],
+              [118.31524, 36.24938],
+              [118.306948, 36.252123],
+              [118.315003, 36.266361],
+              [118.31366, 36.277371],
+              [118.317609, 36.288903],
+              [118.310107, 36.295716],
+              [118.315477, 36.304464],
+              [118.30908, 36.307125],
+              [118.304105, 36.321393],
+              [118.291075, 36.326189],
+              [118.300157, 36.338116],
+              [118.269912, 36.339849],
+              [118.261857, 36.345852],
+              [118.262726, 36.352218],
+              [118.256093, 36.363175],
+              [118.239825, 36.376748],
+              [118.235403, 36.389634],
+              [118.251592, 36.401995],
+              [118.250407, 36.411214],
+              [118.227427, 36.408034],
+              [118.224427, 36.414234],
+              [118.228533, 36.430736],
+              [118.232797, 36.432869],
+              [118.22719, 36.451379],
+              [118.233508, 36.456609],
+              [118.229638, 36.467793],
+              [118.216135, 36.478573],
+              [118.212818, 36.490075],
+              [118.218346, 36.497354],
+              [118.210528, 36.503466],
+              [118.213766, 36.513075],
+              [118.210844, 36.526099],
+              [118.221663, 36.531887],
+              [118.214556, 36.539322],
+              [118.191892, 36.546074],
+              [118.183916, 36.561142],
+              [118.180915, 36.5607],
+              [118.180678, 36.577412],
+              [118.176967, 36.582996],
+              [118.180363, 36.593599],
+              [118.189523, 36.599141],
+              [118.200657, 36.612071],
+              [118.214793, 36.621144],
+              [118.20658, 36.637482],
+              [118.199631, 36.639047],
+              [118.215898, 36.648921],
+              [118.221189, 36.664169],
+              [118.230191, 36.660357],
+              [118.226796, 36.668382],
+              [118.215819, 36.668262],
+              [118.21653, 36.6811],
+              [118.228059, 36.694016],
+              [118.245037, 36.690647],
+              [118.238246, 36.697305],
+              [118.227585, 36.697625],
+              [118.237614, 36.712704],
+              [118.227743, 36.717957],
+              [118.234219, 36.726457],
+              [118.254276, 36.731789],
+              [118.264147, 36.72373],
+              [118.277019, 36.719801],
+              [118.284363, 36.72337],
+              [118.276151, 36.731749],
+              [118.27157, 36.744015],
+              [118.279546, 36.753033],
+              [118.298183, 36.753914],
+              [118.297788, 36.777677],
+              [118.307501, 36.776234],
+              [118.318161, 36.77972],
+              [118.321636, 36.770905],
+              [118.350222, 36.768301],
+              [118.388522, 36.791217],
+              [118.419872, 36.796304],
+              [118.424531, 36.802673],
+              [118.438666, 36.809682],
+              [118.44072, 36.828142],
+              [118.435508, 36.838391],
+              [118.450038, 36.83747],
+              [118.453828, 36.857564],
+              [118.461488, 36.854322],
+              [118.460462, 36.846597],
+              [118.480993, 36.852641],
+              [118.479967, 36.860166],
+              [118.465042, 36.861366],
+              [118.476966, 36.876893],
+              [118.482809, 36.879214],
+              [118.483046, 36.900777],
+              [118.474913, 36.905297],
+              [118.481862, 36.914136],
+              [118.48968, 36.914096],
+              [118.496708, 36.924733],
+              [118.492365, 36.931611],
+              [118.494339, 36.941846],
+              [118.467411, 36.945484],
+              [118.439061, 36.942206],
+              [118.40321, 36.943125],
+              [118.401788, 36.949802],
+              [118.386548, 36.950481],
+              [118.387574, 36.971305],
+              [118.384652, 36.974382],
+              [118.352276, 36.974582],
+              [118.3443, 36.960714],
+              [118.324637, 36.964751],
+              [118.322347, 36.974502],
+              [118.312476, 36.970905],
+              [118.294629, 36.969666],
+              [118.291628, 36.995878],
+              [118.288785, 36.999993],
+              [118.271412, 37.006744],
+              [118.262568, 37.00271],
+              [118.250802, 37.002949],
+              [118.247327, 36.98613],
+              [118.235087, 36.98557],
+              [118.231376, 36.974822],
+              [118.222531, 36.967109],
+              [118.209739, 36.963152],
+              [118.195209, 36.967348],
+              [118.192918, 36.977739],
+              [118.160936, 36.981934],
+              [118.161331, 36.988567],
+              [118.15146, 36.988527],
+              [118.153198, 37.000512],
+              [118.138983, 37.005985],
+              [118.139299, 37.014693],
+              [118.134008, 37.025955],
+              [118.139299, 37.033103],
+              [118.139615, 37.044363],
+              [118.15146, 37.047038],
+              [118.150829, 37.054743],
+              [118.15762, 37.057776],
+              [118.156909, 37.065281],
+              [118.13622, 37.06536],
+              [118.136062, 37.077773],
+              [118.130455, 37.091101],
+              [118.115925, 37.100636],
+              [118.111187, 37.094652],
+              [118.086075, 37.091899],
+              [118.063016, 37.082841],
+              [118.056857, 37.093654],
+              [118.045959, 37.098202],
+              [118.045485, 37.105982],
+              [118.057252, 37.106141],
+              [118.068623, 37.115875],
+              [118.079679, 37.120781],
+              [118.065069, 37.139564],
+              [118.059858, 37.151087],
+              [118.062385, 37.162528],
+              [118.074467, 37.170341],
+              [118.071545, 37.177675],
+              [118.082995, 37.185605],
+              [118.077941, 37.188953],
+              [118.074072, 37.204094],
+              [118.064122, 37.21007],
+              [118.048012, 37.205568],
+              [118.046275, 37.216324],
+              [118.036799, 37.220905],
+              [118.022348, 37.2221],
+              [118.019584, 37.210309],
+              [118.010898, 37.20756],
+              [117.994393, 37.212699],
+              [117.984364, 37.210349],
+              [117.98089, 37.218674],
+              [117.973862, 37.216483],
+              [117.981048, 37.238429],
+              [117.996446, 37.246273],
+              [117.990761, 37.248981],
+              [117.990603, 37.262358],
+              [117.963833, 37.271753],
+              [117.947013, 37.262159],
+              [117.948829, 37.26829],
+              [117.941327, 37.280549],
+              [117.909266, 37.265065],
+              [117.888497, 37.262319],
+              [117.8776, 37.273027],
+              [117.850909, 37.28246],
+              [117.83859, 37.282659],
+              [117.818848, 37.276012],
+              [117.782128, 37.248702],
+              [117.773678, 37.244959],
+              [117.760333, 37.244959],
+              [117.729851, 37.249101],
+              [117.693447, 37.257661],
+              [117.675995, 37.270121],
+              [117.659491, 37.274101],
+              [117.644329, 37.265862],
+              [117.63043, 37.247269],
+              [117.627193, 37.228074],
+              [117.615348, 37.212699],
+              [117.598212, 37.203058],
+              [117.592052, 37.169624],
+              [117.586366, 37.160216],
+              [117.574284, 37.151366],
+              [117.551305, 37.146781],
+              [117.557464, 37.124211],
+              [117.574442, 37.12106],
+              [117.576969, 37.114758],
+              [117.567888, 37.11029],
+              [117.575074, 37.089185],
+              [117.590946, 37.084996],
+              [117.608477, 37.090622],
+              [117.619375, 37.090103],
+              [117.644645, 37.083878],
+              [117.673942, 37.073143],
+              [117.703002, 37.068673],
+              [117.726692, 37.068753],
+              [117.739801, 37.064921],
+              [117.761991, 37.065839],
+              [117.771783, 37.069032],
+              [117.800369, 37.070789],
+              [117.847355, 37.065959],
+              [117.840327, 37.035539],
+              [117.841827, 37.026354],
+              [117.865992, 37.023719],
+              [117.870493, 37.013375],
+              [117.866386, 37.007024],
+              [117.866623, 36.993282],
+              [117.870493, 36.985451],
+              [117.906581, 36.981695],
+              [117.911951, 36.975141],
+              [117.910292, 36.962592],
+              [117.913372, 36.953679],
+              [117.931772, 36.941886],
+              [117.936115, 36.93489],
+              [117.935404, 36.915736],
+              [117.94338, 36.930012],
+              [117.949145, 36.918375],
+              [117.96178, 36.922494],
+              [117.960674, 36.910376],
+              [117.950645, 36.902137],
+              [117.9403, 36.901177],
+              [117.940616, 36.891616],
+              [117.929719, 36.890216],
+              [117.9189, 36.880094],
+              [117.917005, 36.86973],
+              [117.891814, 36.871811],
+              [117.891103, 36.864408],
+              [117.875152, 36.861246],
+              [117.865597, 36.866529],
+              [117.856594, 36.859926],
+              [117.832825, 36.859966],
+              [117.828008, 36.855883],
+              [117.831877, 36.836629],
+              [117.822085, 36.825139],
+              [117.820901, 36.801511],
+              [117.814662, 36.797306],
+              [117.815531, 36.788573],
+              [117.824297, 36.787933],
+              [117.825639, 36.775834],
+              [117.840327, 36.777516],
+              [117.850672, 36.764735],
+              [117.852488, 36.750708],
+              [117.832983, 36.744816],
+              [117.834404, 36.751871],
+              [117.826429, 36.763011],
+              [117.820743, 36.756359],
+              [117.810161, 36.734394],
+              [117.795157, 36.719761],
+              [117.793025, 36.707451],
+              [117.78197, 36.70304],
+              [117.777942, 36.695219],
+              [117.754173, 36.696944],
+              [117.725666, 36.695219],
+              [117.718006, 36.697826],
+              [117.715637, 36.691208],
+              [117.701265, 36.685191],
+              [117.695184, 36.666978],
+              [117.698027, 36.652974],
+              [117.709003, 36.651569],
+              [117.712241, 36.642258],
+              [117.70853, 36.635154],
+              [117.715321, 36.627527],
+              [117.714926, 36.610545],
+              [117.706555, 36.611549],
+              [117.705055, 36.605807],
+              [117.690525, 36.604883],
+              [117.697869, 36.599422],
+              [117.715163, 36.600546],
+              [117.706792, 36.593559],
+              [117.715321, 36.578537],
+              [117.706792, 36.581469],
+              [117.696132, 36.575042],
+              [117.694315, 36.568896],
+              [117.720849, 36.560057],
+              [117.72377, 36.54732],
+              [117.739406, 36.539925],
+              [117.742486, 36.525737],
+              [117.750777, 36.524652],
+              [117.76586, 36.512994],
+              [117.765544, 36.509496],
+              [117.751646, 36.509979],
+              [117.735853, 36.504993],
+              [117.743118, 36.498439],
+              [117.755673, 36.496228],
+              [117.757332, 36.484485],
+              [117.748566, 36.478694],
+              [117.765544, 36.469845],
+              [117.757016, 36.459144],
+              [117.763491, 36.452868],
+              [117.755752, 36.445303],
+              [117.779838, 36.441239],
+              [117.786471, 36.434277],
+              [117.7965, 36.43963],
+              [117.799343, 36.432265],
+              [117.817268, 36.436129],
+              [117.822717, 36.44305],
+              [117.833062, 36.44301],
+              [117.826823, 36.427114],
+              [117.829508, 36.417776],
+              [117.855094, 36.412945],
+              [117.859279, 36.389433],
+              [117.867492, 36.386373],
+              [117.879732, 36.370626],
+              [117.882101, 36.35673],
+              [117.890314, 36.366035],
+              [117.89521, 36.359227],
+              [117.893472, 36.339446],
+              [117.902633, 36.352057],
+              [117.915346, 36.352903],
+              [117.933904, 36.341219],
+              [117.933509, 36.334369],
+              [117.919611, 36.324738],
+              [117.918347, 36.317725],
+              [117.924823, 36.313171],
+              [117.922533, 36.300514],
+              [117.93114, 36.283742],
+              [117.926797, 36.277532],
+              [117.932719, 36.271846],
+              [117.943696, 36.274064],
+              [117.972993, 36.268378],
+              [117.975362, 36.262328],
+              [117.96707, 36.248251],
+              [117.96328, 36.224971],
+              [117.967781, 36.21464],
+              [117.959332, 36.204308],
+              [117.943933, 36.207981],
+              [117.928534, 36.196558],
+              [117.921664, 36.203662],
+              [117.914636, 36.200837],
+              [117.915899, 36.192562],
+              [117.903027, 36.172092],
+              [117.912109, 36.171648],
+              [117.917873, 36.16337],
+              [117.90666, 36.152708],
+              [117.914162, 36.140631],
+              [117.91203, 36.132753],
+              [117.923875, 36.1174],
+              [117.921111, 36.110005],
+              [117.931535, 36.094203],
+              [117.939984, 36.094324],
+              [117.946618, 36.100387],
+              [117.954041, 36.090201],
+              [117.953172, 36.081833],
+              [117.946223, 36.08151],
+              [117.94188, 36.071807],
+              [117.948829, 36.062589],
+              [117.935799, 36.061214],
+              [117.932798, 36.052196],
+              [117.946855, 36.04253],
+              [117.949855, 36.018259],
+              [117.94338, 36.017288],
+              [117.950803, 35.996489],
+              [117.937536, 35.99653],
+              [117.937221, 35.98119],
+              [117.947013, 35.971111],
+              [117.947013, 35.960382],
+              [117.953962, 35.957913],
+              [117.971414, 35.969937],
+              [117.992577, 35.971273],
+              [117.984443, 35.956293],
+              [117.988471, 35.947709]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 370400,
+        "name": "枣庄市",
+        "center": [117.557964, 34.856424],
+        "centroid": [117.39817, 34.916234],
+        "childrenNum": 6,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 3,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [117.392342, 34.574909],
+              [117.402529, 34.569431],
+              [117.403793, 34.546898],
+              [117.424482, 34.537009],
+              [117.426772, 34.525224],
+              [117.439486, 34.520031],
+              [117.438223, 34.516445],
+              [117.45141, 34.506264],
+              [117.465467, 34.48458],
+              [117.48205, 34.48594],
+              [117.48663, 34.482065],
+              [117.487341, 34.466354],
+              [117.493263, 34.472663],
+              [117.513005, 34.472581],
+              [117.538275, 34.46722],
+              [117.54783, 34.475179],
+              [117.561334, 34.471962],
+              [117.569783, 34.463054],
+              [117.592289, 34.462518],
+              [117.603187, 34.476828],
+              [117.609662, 34.490476],
+              [117.629246, 34.488538],
+              [117.642039, 34.496825],
+              [117.647014, 34.492908],
+              [117.659096, 34.501071],
+              [117.673389, 34.515827],
+              [117.681996, 34.529551],
+              [117.684523, 34.547351],
+              [117.700712, 34.54525],
+              [117.748645, 34.533383],
+              [117.773994, 34.529056],
+              [117.790498, 34.518918],
+              [117.801712, 34.518753],
+              [117.799185, 34.535155],
+              [117.793499, 34.548463],
+              [117.794605, 34.559751],
+              [117.791446, 34.585082],
+              [117.798553, 34.621848],
+              [117.793657, 34.625594],
+              [117.796026, 34.637736],
+              [117.793657, 34.651768],
+              [117.805818, 34.646254],
+              [117.819243, 34.681842],
+              [117.825639, 34.684392],
+              [117.831719, 34.707793],
+              [117.825244, 34.713139],
+              [117.823665, 34.72868],
+              [117.830061, 34.740888],
+              [117.830614, 34.760246],
+              [117.79958, 34.768875],
+              [117.784576, 34.780667],
+              [117.784023, 34.79484],
+              [117.77739, 34.801248],
+              [117.798632, 34.810653],
+              [117.803686, 34.830734],
+              [117.795315, 34.835907],
+              [117.763175, 34.848839],
+              [117.75291, 34.857623],
+              [117.742407, 34.874163],
+              [117.729298, 34.876994],
+              [117.715163, 34.896238],
+              [117.70466, 34.906699],
+              [117.698501, 34.919989],
+              [117.704265, 34.933605],
+              [117.712004, 34.934999],
+              [117.714689, 34.947833],
+              [117.724323, 34.958329],
+              [117.719506, 34.968331],
+              [117.726534, 34.979561],
+              [117.728035, 35.008041],
+              [117.737985, 35.013203],
+              [117.744618, 35.022748],
+              [117.736247, 35.031514],
+              [117.704423, 35.031227],
+              [117.707345, 35.052318],
+              [117.69321, 35.06018],
+              [117.676469, 35.065543],
+              [117.656885, 35.077497],
+              [117.650725, 35.092724],
+              [117.623007, 35.113063],
+              [117.604371, 35.13401],
+              [117.600344, 35.135524],
+              [117.591025, 35.152539],
+              [117.586208, 35.152989],
+              [117.58376, 35.164317],
+              [117.570336, 35.168365],
+              [117.556043, 35.161291],
+              [117.548462, 35.161741],
+              [117.528009, 35.184351],
+              [117.526825, 35.200621],
+              [117.507162, 35.198986],
+              [117.494843, 35.205893],
+              [117.480628, 35.222771],
+              [117.468073, 35.228369],
+              [117.448331, 35.231842],
+              [117.449752, 35.246795],
+              [117.439486, 35.258927],
+              [117.426456, 35.261786],
+              [117.419191, 35.273997],
+              [117.406004, 35.283348],
+              [117.403635, 35.301394],
+              [117.399528, 35.306374],
+              [117.359571, 35.318375],
+              [117.347568, 35.315109],
+              [117.318034, 35.320252],
+              [117.308557, 35.312579],
+              [117.314085, 35.302129],
+              [117.311163, 35.28588],
+              [117.305794, 35.295229],
+              [117.290079, 35.299394],
+              [117.284472, 35.294331],
+              [117.262203, 35.287472],
+              [117.269231, 35.261296],
+              [117.220824, 35.26489],
+              [117.204873, 35.258518],
+              [117.199108, 35.24749],
+              [117.176681, 35.243159],
+              [117.152675, 35.232047],
+              [117.123536, 35.23078],
+              [117.104899, 35.221464],
+              [117.092896, 35.220361],
+              [117.065336, 35.22792],
+              [117.053333, 35.224202],
+              [117.028774, 35.221219],
+              [117.014639, 35.214844],
+              [116.995687, 35.1978],
+              [116.969706, 35.187377],
+              [116.962047, 35.177319],
+              [116.938277, 35.172168],
+              [116.925721, 35.182266],
+              [116.913718, 35.178791],
+              [116.904716, 35.182471],
+              [116.898398, 35.195757],
+              [116.876603, 35.188031],
+              [116.86618, 35.172617],
+              [116.85394, 35.16861],
+              [116.832776, 35.184392],
+              [116.811218, 35.17736],
+              [116.81564, 35.170777],
+              [116.813192, 35.159573],
+              [116.81793, 35.150699],
+              [116.825748, 35.147631],
+              [116.832065, 35.123783],
+              [116.848649, 35.103774],
+              [116.863179, 35.091496],
+              [116.888922, 35.093829],
+              [116.888212, 35.085193],
+              [116.900373, 35.068737],
+              [116.880473, 35.062595],
+              [116.881183, 35.058133],
+              [116.900767, 35.05977],
+              [116.907875, 35.046995],
+              [116.937172, 35.0275],
+              [116.951702, 35.020618],
+              [116.956993, 35.01054],
+              [116.954466, 34.993331],
+              [116.943015, 34.975627],
+              [116.955334, 34.967142],
+              [116.9671, 34.951072],
+              [116.980367, 34.941027],
+              [116.989448, 34.93873],
+              [117.017719, 34.942503],
+              [117.038487, 34.937869],
+              [117.043462, 34.932825],
+              [117.041093, 34.925157],
+              [117.05815, 34.926961],
+              [117.06123, 34.930406],
+              [117.073707, 34.925485],
+              [117.082551, 34.934917],
+              [117.103399, 34.937459],
+              [117.111059, 34.917774],
+              [117.110111, 34.90514],
+              [117.12093, 34.903581],
+              [117.125826, 34.863451],
+              [117.139013, 34.854052],
+              [117.140593, 34.846499],
+              [117.156623, 34.834306],
+              [117.17755, 34.828722],
+              [117.194686, 34.816239],
+              [117.180314, 34.800221],
+              [117.172733, 34.799194],
+              [117.162467, 34.782105],
+              [117.176523, 34.779065],
+              [117.180551, 34.784201],
+              [117.191369, 34.780914],
+              [117.212927, 34.761027],
+              [117.22422, 34.745533],
+              [117.236697, 34.746355],
+              [117.242067, 34.729995],
+              [117.253675, 34.721444],
+              [117.271443, 34.726501],
+              [117.278787, 34.715647],
+              [117.304609, 34.714866],
+              [117.310611, 34.717333],
+              [117.326167, 34.703434],
+              [117.324272, 34.697307],
+              [117.335485, 34.692454],
+              [117.329247, 34.677359],
+              [117.346067, 34.670982],
+              [117.35657, 34.661643],
+              [117.354201, 34.653538],
+              [117.366915, 34.650246],
+              [117.374022, 34.636172],
+              [117.376707, 34.622301],
+              [117.384051, 34.628228],
+              [117.402687, 34.628434],
+              [117.4109, 34.623454],
+              [117.407978, 34.610651],
+              [117.397949, 34.604393],
+              [117.398976, 34.588335],
+              [117.393922, 34.587676],
+              [117.392342, 34.574909]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 370500,
+        "name": "东营市",
+        "center": [118.66471, 37.434564],
+        "centroid": [118.64357, 37.639575],
+        "childrenNum": 5,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 4,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [118.245432, 38.144286],
+              [118.236272, 38.125754],
+              [118.227664, 38.119262],
+              [118.241247, 38.112138],
+              [118.245511, 38.103322],
+              [118.235324, 38.082969],
+              [118.226638, 38.079583],
+              [118.230665, 38.056743],
+              [118.227585, 38.037874],
+              [118.410001, 38.053277],
+              [118.419319, 38.053119],
+              [118.419951, 38.025503],
+              [118.40779, 38.026212],
+              [118.2234, 38.00095],
+              [118.22956, 37.986444],
+              [118.220873, 37.98258],
+              [118.223479, 37.959788],
+              [118.213529, 37.95541],
+              [118.215503, 37.949376],
+              [118.224742, 37.950559],
+              [118.226954, 37.939672],
+              [118.225611, 37.923417],
+              [118.232718, 37.922509],
+              [118.235403, 37.905343],
+              [118.243142, 37.895673],
+              [118.236588, 37.884501],
+              [118.239115, 37.868708],
+              [118.248749, 37.858164],
+              [118.247643, 37.871788],
+              [118.258146, 37.854886],
+              [118.258304, 37.844182],
+              [118.269754, 37.853109],
+              [118.286337, 37.8569],
+              [118.301657, 37.870208],
+              [118.313265, 37.861521],
+              [118.328111, 37.865272],
+              [118.340193, 37.838059],
+              [118.334271, 37.832134],
+              [118.346116, 37.832371],
+              [118.344932, 37.824627],
+              [118.356382, 37.820834],
+              [118.352355, 37.814274],
+              [118.36191, 37.792063],
+              [118.348406, 37.790719],
+              [118.340588, 37.774391],
+              [118.340667, 37.763913],
+              [118.353065, 37.75814],
+              [118.353697, 37.750151],
+              [118.341931, 37.74667],
+              [118.337509, 37.729502],
+              [118.31753, 37.728395],
+              [118.319425, 37.712924],
+              [118.316187, 37.714151],
+              [118.3045, 37.690722],
+              [118.305132, 37.683122],
+              [118.294076, 37.678529],
+              [118.293129, 37.670096],
+              [118.2846, 37.662058],
+              [118.260989, 37.654614],
+              [118.246459, 37.658376],
+              [118.239431, 37.65596],
+              [118.22569, 37.663682],
+              [118.207449, 37.661583],
+              [118.200657, 37.667404],
+              [118.195445, 37.661742],
+              [118.177125, 37.657623],
+              [118.172545, 37.644079],
+              [118.165596, 37.644633],
+              [118.163542, 37.63069],
+              [118.154935, 37.628036],
+              [118.157462, 37.62035],
+              [118.154935, 37.605491],
+              [118.146722, 37.599943],
+              [118.148696, 37.594078],
+              [118.134877, 37.590035],
+              [118.127612, 37.578103],
+              [118.131324, 37.571285],
+              [118.13922, 37.571364],
+              [118.134166, 37.558478],
+              [118.141431, 37.556297],
+              [118.173176, 37.563593],
+              [118.176098, 37.557129],
+              [118.173255, 37.546858],
+              [118.159831, 37.539164],
+              [118.156988, 37.530358],
+              [118.150987, 37.530517],
+              [118.142537, 37.518933],
+              [118.136772, 37.516791],
+              [118.139378, 37.507427],
+              [118.134245, 37.507387],
+              [118.135035, 37.496752],
+              [118.127849, 37.491831],
+              [118.128481, 37.483694],
+              [118.120426, 37.480757],
+              [118.112766, 37.463528],
+              [118.125322, 37.45912],
+              [118.118531, 37.456182],
+              [118.114898, 37.439742],
+              [118.136141, 37.441688],
+              [118.14996, 37.438351],
+              [118.163937, 37.416742],
+              [118.165596, 37.4082],
+              [118.160147, 37.399618],
+              [118.16141, 37.389961],
+              [118.144037, 37.392822],
+              [118.135509, 37.384834],
+              [118.141668, 37.376487],
+              [118.154935, 37.377401],
+              [118.156198, 37.364322],
+              [118.161015, 37.362573],
+              [118.202, 37.382409],
+              [118.216925, 37.385191],
+              [118.217951, 37.371478],
+              [118.222768, 37.367861],
+              [118.245353, 37.367781],
+              [118.245827, 37.376646],
+              [118.258541, 37.37911],
+              [118.262015, 37.364283],
+              [118.273624, 37.360029],
+              [118.286495, 37.362772],
+              [118.291865, 37.358518],
+              [118.287285, 37.352434],
+              [118.315398, 37.352514],
+              [118.31524, 37.31477],
+              [118.319741, 37.305978],
+              [118.326058, 37.306535],
+              [118.325584, 37.296866],
+              [118.342168, 37.295075],
+              [118.342168, 37.287076],
+              [118.355197, 37.286997],
+              [118.358277, 37.280669],
+              [118.368069, 37.279594],
+              [118.36262, 37.273783],
+              [118.372096, 37.273703],
+              [118.375729, 37.258497],
+              [118.368385, 37.258576],
+              [118.36033, 37.244561],
+              [118.350459, 37.243765],
+              [118.346669, 37.233252],
+              [118.3642, 37.210189],
+              [118.375966, 37.206126],
+              [118.376598, 37.196962],
+              [118.383389, 37.190587],
+              [118.387574, 37.177834],
+              [118.380467, 37.175164],
+              [118.377545, 37.154157],
+              [118.366569, 37.146781],
+              [118.361594, 37.148495],
+              [118.356224, 37.139325],
+              [118.347616, 37.139803],
+              [118.340667, 37.131748],
+              [118.346116, 37.123931],
+              [118.338219, 37.123134],
+              [118.349354, 37.101753],
+              [118.338298, 37.10311],
+              [118.338851, 37.093894],
+              [118.332928, 37.081923],
+              [118.338535, 37.072265],
+              [118.337588, 37.053904],
+              [118.324558, 37.046279],
+              [118.3259, 37.035459],
+              [118.310186, 37.028231],
+              [118.308212, 37.019885],
+              [118.28997, 37.00946],
+              [118.288785, 36.999993],
+              [118.291628, 36.995878],
+              [118.294629, 36.969666],
+              [118.312476, 36.970905],
+              [118.322347, 36.974502],
+              [118.324637, 36.964751],
+              [118.3443, 36.960714],
+              [118.352276, 36.974582],
+              [118.384652, 36.974382],
+              [118.387574, 36.971305],
+              [118.386548, 36.950481],
+              [118.401788, 36.949802],
+              [118.40321, 36.943125],
+              [118.439061, 36.942206],
+              [118.467411, 36.945484],
+              [118.47665, 36.957077],
+              [118.503736, 36.95156],
+              [118.503183, 36.944285],
+              [118.524583, 36.945284],
+              [118.52711, 36.939687],
+              [118.537771, 36.936769],
+              [118.55467, 36.938368],
+              [118.560751, 36.946564],
+              [118.557434, 36.96539],
+              [118.559803, 36.977059],
+              [118.552301, 36.979657],
+              [118.553959, 37.000233],
+              [118.564146, 36.99416],
+              [118.580493, 36.994999],
+              [118.566199, 36.999034],
+              [118.571174, 37.004148],
+              [118.590206, 37.001351],
+              [118.583572, 37.008422],
+              [118.588389, 37.017409],
+              [118.57149, 37.022081],
+              [118.545826, 37.023519],
+              [118.545431, 37.038494],
+              [118.56004, 37.041408],
+              [118.557592, 37.051469],
+              [118.561303, 37.063325],
+              [118.580414, 37.063325],
+              [118.591469, 37.068474],
+              [118.610895, 37.063005],
+              [118.631901, 37.066757],
+              [118.632138, 37.070429],
+              [118.654091, 37.076935],
+              [118.655512, 37.082681],
+              [118.665146, 37.081763],
+              [118.668384, 37.091539],
+              [118.667041, 37.11392],
+              [118.673754, 37.144309],
+              [118.653617, 37.149692],
+              [118.649195, 37.164243],
+              [118.64572, 37.159579],
+              [118.634191, 37.163366],
+              [118.633638, 37.171178],
+              [118.645483, 37.178153],
+              [118.649274, 37.189112],
+              [118.660408, 37.187877],
+              [118.668779, 37.198436],
+              [118.672332, 37.215129],
+              [118.680624, 37.229269],
+              [118.709684, 37.241256],
+              [118.728399, 37.252764],
+              [118.777991, 37.280112],
+              [118.821897, 37.288788],
+              [118.856959, 37.293842],
+              [119.039928, 37.304466],
+              [119.010315, 37.313218],
+              [119.001233, 37.318748],
+              [118.98694, 37.339511],
+              [118.981412, 37.35983],
+              [118.985598, 37.365754],
+              [119.009841, 37.370763],
+              [119.012842, 37.376089],
+              [119.003444, 37.383403],
+              [118.982597, 37.378077],
+              [118.977385, 37.382052],
+              [118.973121, 37.404346],
+              [118.958275, 37.454912],
+              [118.942955, 37.497466],
+              [118.939638, 37.527066],
+              [118.9518, 37.556019],
+              [118.972331, 37.594474],
+              [118.988677, 37.620905],
+              [119.024213, 37.6419],
+              [119.065355, 37.64194],
+              [119.118343, 37.64804],
+              [119.153404, 37.655406],
+              [119.236321, 37.652079],
+              [119.262617, 37.660475],
+              [119.280464, 37.692503],
+              [119.299653, 37.75549],
+              [119.309129, 37.805383],
+              [119.304075, 37.845486],
+              [119.292151, 37.869616],
+              [119.263801, 37.88154],
+              [119.240348, 37.878026],
+              [119.212709, 37.83881],
+              [119.161617, 37.819214],
+              [119.135874, 37.827985],
+              [119.122844, 37.866536],
+              [119.120554, 37.897054],
+              [119.110604, 37.921365],
+              [119.045297, 37.967597],
+              [119.00455, 37.992278],
+              [118.996495, 38.013996],
+              [118.985282, 38.062099],
+              [118.974068, 38.09415],
+              [118.958512, 38.110131],
+              [118.931426, 38.127486],
+              [118.908051, 38.139368],
+              [118.877491, 38.149596],
+              [118.853721, 38.154985],
+              [118.811474, 38.15762],
+              [118.777754, 38.156952],
+              [118.726425, 38.154238],
+              [118.62582, 38.138306],
+              [118.607816, 38.12906],
+              [118.603946, 38.101354],
+              [118.597629, 38.078993],
+              [118.565568, 38.060209],
+              [118.552459, 38.055679],
+              [118.534533, 38.063517],
+              [118.530269, 38.073204],
+              [118.517081, 38.088363],
+              [118.513212, 38.10466],
+              [118.504526, 38.113909],
+              [118.483204, 38.123236],
+              [118.461409, 38.126659],
+              [118.449722, 38.124259],
+              [118.43148, 38.106274],
+              [118.420425, 38.107337],
+              [118.404078, 38.120914],
+              [118.39097, 38.123315],
+              [118.38023, 38.119931],
+              [118.360172, 38.120954],
+              [118.330717, 38.125046],
+              [118.274334, 38.138542],
+              [118.245432, 38.144286]
+            ]
+          ],
+          [
+            [
+              [118.410001, 38.053277],
+              [118.227585, 38.037874],
+              [118.2234, 38.00095],
+              [118.40779, 38.026212],
+              [118.410001, 38.053277]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 370600,
+        "name": "烟台市",
+        "center": [121.391382, 37.539297],
+        "centroid": [120.804685, 37.241819],
+        "childrenNum": 11,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 5,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [119.576514, 37.127561],
+              [119.568696, 37.100157],
+              [119.576198, 37.087509],
+              [119.559615, 37.071786],
+              [119.563406, 37.058495],
+              [119.606048, 37.04037],
+              [119.613155, 37.034101],
+              [119.60976, 37.013894],
+              [119.619078, 37.017848],
+              [119.61971, 37.012895],
+              [119.629344, 37.01621],
+              [119.66251, 37.008262],
+              [119.681699, 36.998475],
+              [119.716998, 37.007144],
+              [119.722289, 36.993401],
+              [119.731133, 36.988487],
+              [119.743057, 36.992483],
+              [119.750559, 36.990844],
+              [119.769906, 36.996597],
+              [119.771881, 37.006984],
+              [119.804968, 37.013814],
+              [119.820209, 36.999594],
+              [119.829606, 37.002031],
+              [119.85148, 37.002031],
+              [119.900045, 36.997556],
+              [119.902257, 36.9948],
+              [119.923341, 36.993961],
+              [119.939608, 37.004108],
+              [119.949716, 37.006185],
+              [119.961561, 37.013654],
+              [119.975618, 37.011098],
+              [119.980198, 37.018088],
+              [119.993543, 37.012176],
+              [120.002309, 37.013494],
+              [120.024104, 36.999913],
+              [120.035238, 36.998395],
+              [120.049374, 37.020045],
+              [120.09249, 37.017928],
+              [120.101571, 37.014293],
+              [120.123051, 37.01645],
+              [120.138134, 37.022201],
+              [120.142319, 37.015292],
+              [120.159929, 37.013375],
+              [120.167273, 37.017968],
+              [120.166404, 37.025795],
+              [120.173037, 37.034421],
+              [120.180697, 37.032544],
+              [120.189621, 37.038094],
+              [120.193411, 37.034261],
+              [120.205335, 37.038374],
+              [120.21647, 37.056699],
+              [120.214101, 37.07019],
+              [120.220497, 37.08711],
+              [120.229894, 37.089544],
+              [120.231237, 37.106301],
+              [120.236606, 37.125965],
+              [120.245688, 37.118906],
+              [120.264087, 37.114718],
+              [120.280828, 37.13111],
+              [120.303413, 37.130153],
+              [120.300176, 37.119584],
+              [120.315337, 37.113043],
+              [120.320628, 37.10654],
+              [120.331684, 37.111966],
+              [120.336896, 37.104267],
+              [120.336343, 37.092058],
+              [120.34574, 37.087789],
+              [120.348583, 37.077094],
+              [120.357822, 37.084357],
+              [120.362244, 37.100477],
+              [120.369667, 37.104626],
+              [120.388225, 37.104227],
+              [120.398096, 37.096447],
+              [120.408914, 37.09517],
+              [120.412942, 37.103149],
+              [120.407098, 37.112803],
+              [120.415153, 37.110569],
+              [120.439475, 37.116912],
+              [120.440265, 37.122655],
+              [120.462928, 37.115157],
+              [120.478643, 37.124211],
+              [120.493015, 37.126723],
+              [120.493805, 37.1345],
+              [120.505729, 37.143551],
+              [120.506834, 37.148854],
+              [120.517258, 37.148974],
+              [120.527129, 37.143352],
+              [120.527998, 37.136733],
+              [120.542528, 37.128677],
+              [120.547661, 37.113003],
+              [120.536368, 37.081963],
+              [120.539843, 37.060371],
+              [120.533289, 37.053944],
+              [120.541738, 37.044163],
+              [120.549793, 37.041288],
+              [120.558953, 37.047437],
+              [120.570877, 37.046399],
+              [120.58446, 37.058136],
+              [120.586513, 37.048515],
+              [120.606176, 37.047157],
+              [120.613915, 37.023839],
+              [120.601754, 37.012696],
+              [120.606413, 37.001192],
+              [120.593857, 36.991244],
+              [120.582328, 37.001791],
+              [120.575931, 36.999074],
+              [120.574036, 36.987568],
+              [120.568508, 36.983293],
+              [120.566534, 36.96559],
+              [120.560296, 36.960674],
+              [120.563218, 36.95172],
+              [120.571114, 36.948682],
+              [120.574984, 36.927053],
+              [120.592909, 36.912216],
+              [120.617389, 36.911136],
+              [120.622838, 36.907377],
+              [120.622838, 36.890856],
+              [120.592909, 36.882134],
+              [120.576642, 36.879894],
+              [120.57988, 36.858885],
+              [120.588408, 36.859045],
+              [120.595989, 36.852681],
+              [120.58754, 36.843635],
+              [120.589751, 36.838791],
+              [120.609809, 36.832906],
+              [120.612336, 36.829223],
+              [120.601517, 36.804996],
+              [120.590382, 36.801552],
+              [120.563454, 36.802953],
+              [120.56377, 36.795343],
+              [120.5554, 36.778718],
+              [120.540791, 36.7679],
+              [120.544502, 36.76213],
+              [120.546397, 36.744616],
+              [120.560375, 36.742492],
+              [120.562586, 36.736479],
+              [120.584065, 36.735236],
+              [120.58525, 36.728501],
+              [120.596542, 36.708052],
+              [120.586118, 36.698829],
+              [120.589751, 36.694497],
+              [120.616521, 36.689764],
+              [120.619206, 36.681541],
+              [120.631446, 36.673357],
+              [120.625128, 36.671231],
+              [120.627339, 36.659836],
+              [120.642027, 36.666095],
+              [120.652135, 36.663327],
+              [120.648977, 36.655863],
+              [120.660585, 36.647998],
+              [120.657426, 36.626644],
+              [120.644712, 36.626524],
+              [120.643449, 36.613436],
+              [120.635947, 36.597775],
+              [120.637763, 36.574199],
+              [120.664059, 36.583478],
+              [120.665402, 36.587454],
+              [120.679695, 36.589181],
+              [120.702991, 36.598338],
+              [120.699121, 36.60665],
+              [120.70836, 36.612914],
+              [120.708281, 36.621385],
+              [120.725733, 36.624436],
+              [120.751556, 36.615042],
+              [120.757557, 36.606088],
+              [120.765533, 36.607011],
+              [120.777062, 36.600546],
+              [120.779747, 36.591551],
+              [120.786223, 36.589663],
+              [120.850108, 36.612271],
+              [120.847107, 36.618615],
+              [120.882011, 36.627086],
+              [120.89504, 36.622188],
+              [120.90578, 36.623473],
+              [120.925917, 36.613837],
+              [120.924495, 36.596892],
+              [120.928681, 36.589783],
+              [120.955609, 36.576087],
+              [121.016019, 36.574721],
+              [121.02897, 36.573194],
+              [121.045237, 36.579581],
+              [121.055582, 36.592675],
+              [121.07793, 36.607614],
+              [121.113939, 36.621907],
+              [121.146079, 36.640372],
+              [121.161399, 36.651288],
+              [121.176877, 36.65482],
+              [121.194881, 36.653295],
+              [121.220941, 36.671271],
+              [121.239261, 36.668342],
+              [121.251896, 36.671351],
+              [121.274876, 36.692652],
+              [121.285536, 36.699871],
+              [121.298724, 36.702318],
+              [121.318308, 36.702117],
+              [121.357792, 36.713105],
+              [121.365531, 36.711461],
+              [121.374691, 36.699791],
+              [121.394354, 36.699029],
+              [121.405489, 36.704443],
+              [121.410385, 36.714709],
+              [121.404304, 36.726457],
+              [121.390406, 36.728742],
+              [121.394038, 36.737962],
+              [121.412596, 36.748103],
+              [121.454291, 36.752351],
+              [121.460687, 36.76245],
+              [121.478218, 36.770825],
+              [121.462424, 36.784888],
+              [121.450184, 36.790056],
+              [121.417334, 36.792739],
+              [121.409121, 36.790176],
+              [121.395855, 36.794342],
+              [121.396802, 36.803834],
+              [121.376665, 36.830384],
+              [121.373428, 36.840593],
+              [121.36174, 36.841273],
+              [121.357239, 36.852401],
+              [121.357397, 36.864048],
+              [121.363873, 36.871651],
+              [121.385431, 36.877333],
+              [121.36482, 36.897417],
+              [121.366557, 36.903617],
+              [121.360951, 36.921494],
+              [121.347605, 36.920574],
+              [121.312938, 36.904097],
+              [121.308358, 36.905177],
+              [121.304173, 36.918335],
+              [121.282615, 36.918535],
+              [121.272191, 36.927532],
+              [121.263189, 36.926093],
+              [121.252607, 36.938088],
+              [121.248501, 36.953679],
+              [121.233734, 36.956917],
+              [121.22639, 36.971065],
+              [121.222915, 36.986649],
+              [121.209096, 36.985371],
+              [121.19038, 36.996558],
+              [121.182404, 36.99456],
+              [121.177587, 37.003748],
+              [121.181299, 37.016131],
+              [121.194565, 37.019485],
+              [121.19496, 37.027273],
+              [121.188564, 37.029948],
+              [121.188011, 37.041169],
+              [121.192512, 37.052108],
+              [121.191407, 37.072026],
+              [121.204279, 37.07897],
+              [121.243131, 37.092138],
+              [121.246368, 37.102631],
+              [121.26153, 37.117989],
+              [121.287827, 37.136055],
+              [121.306542, 37.141996],
+              [121.314044, 37.141079],
+              [121.317992, 37.132825],
+              [121.326916, 37.12768],
+              [121.34113, 37.127002],
+              [121.348316, 37.135975],
+              [121.358187, 37.140282],
+              [121.363715, 37.129236],
+              [121.351475, 37.126962],
+              [121.369795, 37.110889],
+              [121.376823, 37.115915],
+              [121.382746, 37.112125],
+              [121.391432, 37.098282],
+              [121.427363, 37.100796],
+              [121.441656, 37.12106],
+              [121.447578, 37.123333],
+              [121.465425, 37.12086],
+              [121.49946, 37.104426],
+              [121.547868, 37.104945],
+              [121.574954, 37.110091],
+              [121.580323, 37.10674],
+              [121.589168, 37.116712],
+              [121.590352, 37.128518],
+              [121.585377, 37.132306],
+              [121.590747, 37.144269],
+              [121.600539, 37.141079],
+              [121.612147, 37.125846],
+              [121.625414, 37.131908],
+              [121.628889, 37.137969],
+              [121.638839, 37.139524],
+              [121.639865, 37.131908],
+              [121.654316, 37.121897],
+              [121.666714, 37.12082],
+              [121.669162, 37.110649],
+              [121.678007, 37.121658],
+              [121.683692, 37.123014],
+              [121.682271, 37.13127],
+              [121.688983, 37.133503],
+              [121.683455, 37.141917],
+              [121.694037, 37.141239],
+              [121.699328, 37.125926],
+              [121.733995, 37.125607],
+              [121.737706, 37.136175],
+              [121.747656, 37.135776],
+              [121.767872, 37.170979],
+              [121.761002, 37.177954],
+              [121.753895, 37.172493],
+              [121.749315, 37.176439],
+              [121.760686, 37.178831],
+              [121.759738, 37.19222],
+              [121.769057, 37.196364],
+              [121.761634, 37.217997],
+              [121.754527, 37.212022],
+              [121.755632, 37.220506],
+              [121.748525, 37.223255],
+              [121.74813, 37.241575],
+              [121.757211, 37.247667],
+              [121.7749, 37.248225],
+              [121.778296, 37.260487],
+              [121.784692, 37.268409],
+              [121.792431, 37.288469],
+              [121.790615, 37.299532],
+              [121.794879, 37.30375],
+              [121.815253, 37.300447],
+              [121.822281, 37.303988],
+              [121.834047, 37.318311],
+              [121.859396, 37.329249],
+              [121.865239, 37.336727],
+              [121.870293, 37.368894],
+              [121.882454, 37.381694],
+              [121.90038, 37.391232],
+              [121.908435, 37.400969],
+              [121.91878, 37.420755],
+              [121.925966, 37.441767],
+              [121.933941, 37.452529],
+              [121.923992, 37.473096],
+              [121.887587, 37.470039],
+              [121.838943, 37.471468],
+              [121.773084, 37.466505],
+              [121.747893, 37.467458],
+              [121.665767, 37.473453],
+              [121.660239, 37.487187],
+              [121.653843, 37.493061],
+              [121.633469, 37.49318],
+              [121.618939, 37.481948],
+              [121.599118, 37.46992],
+              [121.586562, 37.467299],
+              [121.576059, 37.460391],
+              [121.571558, 37.441449],
+              [121.56532, 37.440377],
+              [121.537207, 37.451219],
+              [121.532074, 37.462456],
+              [121.514938, 37.46186],
+              [121.479245, 37.474961],
+              [121.46045, 37.493855],
+              [121.45666, 37.502665],
+              [121.459819, 37.522623],
+              [121.436444, 37.541227],
+              [121.412438, 37.547652],
+              [121.401066, 37.557804],
+              [121.395934, 37.589876],
+              [121.385905, 37.591303],
+              [121.389774, 37.59705],
+              [121.411016, 37.591263],
+              [121.427047, 37.590788],
+              [121.439603, 37.596218],
+              [121.43676, 37.600815],
+              [121.411174, 37.609494],
+              [121.386142, 37.627798],
+              [121.374849, 37.628749],
+              [121.361898, 37.634216],
+              [121.349264, 37.635206],
+              [121.344289, 37.627759],
+              [121.358266, 37.616467],
+              [121.361583, 37.600855],
+              [121.354791, 37.596178],
+              [121.304963, 37.582979],
+              [121.251264, 37.581116],
+              [121.215887, 37.583098],
+              [121.182483, 37.594276],
+              [121.16977, 37.600617],
+              [121.149554, 37.619875],
+              [121.150107, 37.628987],
+              [121.161715, 37.646336],
+              [121.156582, 37.657386],
+              [121.142684, 37.661267],
+              [121.146079, 37.678846],
+              [121.160057, 37.699034],
+              [121.159583, 37.70687],
+              [121.148527, 37.719651],
+              [121.139841, 37.723054],
+              [121.096329, 37.722698],
+              [121.075482, 37.717791],
+              [121.068375, 37.72519],
+              [121.064584, 37.717119],
+              [121.055108, 37.715734],
+              [121.037735, 37.718583],
+              [121.019573, 37.731085],
+              [121.016098, 37.741766],
+              [120.995724, 37.759049],
+              [120.975588, 37.762371],
+              [120.952924, 37.776882],
+              [120.943448, 37.78554],
+              [120.941158, 37.793367],
+              [120.947712, 37.798624],
+              [120.94637, 37.813405],
+              [120.935788, 37.822375],
+              [120.921653, 37.819885],
+              [120.915019, 37.824034],
+              [120.900489, 37.823679],
+              [120.890381, 37.832963],
+              [120.865112, 37.832963],
+              [120.832972, 37.821624],
+              [120.811887, 37.822098],
+              [120.797278, 37.827709],
+              [120.778563, 37.831146],
+              [120.762611, 37.829961],
+              [120.754241, 37.837506],
+              [120.743185, 37.833082],
+              [120.733393, 37.833556],
+              [120.657031, 37.793051],
+              [120.63421, 37.796371],
+              [120.621654, 37.790877],
+              [120.595357, 37.767551],
+              [120.579959, 37.760868],
+              [120.528235, 37.757151],
+              [120.518443, 37.750586],
+              [120.482354, 37.755015],
+              [120.47201, 37.757626],
+              [120.447924, 37.754659],
+              [120.437817, 37.74141],
+              [120.386408, 37.707701],
+              [120.368246, 37.698005],
+              [120.341555, 37.693215],
+              [120.227209, 37.693611],
+              [120.216154, 37.686605],
+              [120.220339, 37.672036],
+              [120.232895, 37.662138],
+              [120.244661, 37.657703],
+              [120.269299, 37.658495],
+              [120.273563, 37.650891],
+              [120.2723, 37.63683],
+              [120.265667, 37.628868],
+              [120.24861, 37.623876],
+              [120.215048, 37.621143],
+              [120.210152, 37.616745],
+              [120.217575, 37.603787],
+              [120.208178, 37.588648],
+              [120.246793, 37.556614],
+              [120.235975, 37.548128],
+              [120.222313, 37.532857],
+              [120.199492, 37.524646],
+              [120.194517, 37.512982],
+              [120.144372, 37.481908],
+              [120.108758, 37.470515],
+              [120.086252, 37.465275],
+              [120.06493, 37.449114],
+              [120.012654, 37.442919],
+              [119.986357, 37.425681],
+              [119.949874, 37.42004],
+              [119.937397, 37.393339],
+              [119.927131, 37.386702],
+              [119.843978, 37.376725],
+              [119.839714, 37.37112],
+              [119.842715, 37.361341],
+              [119.838214, 37.34309],
+              [119.848085, 37.337323],
+              [119.85306, 37.326226],
+              [119.869406, 37.321016],
+              [119.874697, 37.313099],
+              [119.883383, 37.310871],
+              [119.888753, 37.302317],
+              [119.888516, 37.293682],
+              [119.882199, 37.280947],
+              [119.895781, 37.275495],
+              [119.892149, 37.263911],
+              [119.860956, 37.262557],
+              [119.858982, 37.253719],
+              [119.885989, 37.252286],
+              [119.877066, 37.24046],
+              [119.865063, 37.233969],
+              [119.83008, 37.225724],
+              [119.822104, 37.220068],
+              [119.80789, 37.196404],
+              [119.790517, 37.185008],
+              [119.780488, 37.175204],
+              [119.771091, 37.160456],
+              [119.754034, 37.147459],
+              [119.740294, 37.133782],
+              [119.724895, 37.143551],
+              [119.687069, 37.14395],
+              [119.68628, 37.15611],
+              [119.678541, 37.157984],
+              [119.629423, 37.142116],
+              [119.576514, 37.127561]
+            ]
+          ],
+          [
+            [
+              [121.508621, 37.55253],
+              [121.526625, 37.562522],
+              [121.520308, 37.565139],
+              [121.50712, 37.556892],
+              [121.508621, 37.55253]
+            ]
+          ],
+          [
+            [
+              [120.729761, 37.94693],
+              [120.722101, 37.94551],
+              [120.721548, 37.931308],
+              [120.729287, 37.931269],
+              [120.725023, 37.923891],
+              [120.731735, 37.920971],
+              [120.721627, 37.917182],
+              [120.727708, 37.909448],
+              [120.740974, 37.908777],
+              [120.753056, 37.894883],
+              [120.760558, 37.890581],
+              [120.764901, 37.896186],
+              [120.759058, 37.911776],
+              [120.765375, 37.922904],
+              [120.758031, 37.929454],
+              [120.746423, 37.951466],
+              [120.737736, 37.955174],
+              [120.729761, 37.94693]
+            ]
+          ],
+          [
+            [
+              [120.692409, 37.983842],
+              [120.696278, 37.974024],
+              [120.706465, 37.966808],
+              [120.732525, 37.961484],
+              [120.736631, 37.971146],
+              [120.730787, 37.974142],
+              [120.724707, 37.987429],
+              [120.71602, 37.987311],
+              [120.697147, 37.995117],
+              [120.685539, 37.991332],
+              [120.692409, 37.983842]
+            ]
+          ],
+          [
+            [
+              [120.653004, 37.980017],
+              [120.64416, 37.964757],
+              [120.653952, 37.963969],
+              [120.658611, 37.975483],
+              [120.653004, 37.980017]
+            ]
+          ],
+          [
+            [
+              [120.452584, 37.768856],
+              [120.463323, 37.786054],
+              [120.453136, 37.788387],
+              [120.435526, 37.786608],
+              [120.443976, 37.770991],
+              [120.452584, 37.768856]
+            ]
+          ],
+          [
+            [
+              [120.682775, 37.92831],
+              [120.687829, 37.931308],
+              [120.692804, 37.94693],
+              [120.678511, 37.944642],
+              [120.679379, 37.937147],
+              [120.673536, 37.929178],
+              [120.682775, 37.92831]
+            ]
+          ],
+          [
+            [
+              [120.750687, 38.150304],
+              [120.760479, 38.15939],
+              [120.771456, 38.156558],
+              [120.787328, 38.158682],
+              [120.777694, 38.172565],
+              [120.760321, 38.176615],
+              [120.753688, 38.195291],
+              [120.747607, 38.202759],
+              [120.742554, 38.198986],
+              [120.738052, 38.174688],
+              [120.73821, 38.161711],
+              [120.750687, 38.150304]
+            ]
+          ],
+          [
+            [
+              [120.91881, 38.34511],
+              [120.914151, 38.354682],
+              [120.921021, 38.362997],
+              [120.913993, 38.364566],
+              [120.91494, 38.373429],
+              [120.900015, 38.3719],
+              [120.895277, 38.363232],
+              [120.90657, 38.349778],
+              [120.91881, 38.34511]
+            ]
+          ],
+          [
+            [
+              [120.841342, 38.335655],
+              [120.85682, 38.343188],
+              [120.842843, 38.355898],
+              [120.841342, 38.335655]
+            ]
+          ],
+          [
+            [
+              [120.903332, 38.381742],
+              [120.922126, 38.385271],
+              [120.931918, 38.382291],
+              [120.931997, 38.391231],
+              [120.91573, 38.401933],
+              [120.898515, 38.386487],
+              [120.903332, 38.381742]
+            ]
+          ],
+          [
+            [
+              [120.62655, 37.945786],
+              [120.630972, 37.952018],
+              [120.632472, 37.978913],
+              [120.614152, 37.984512],
+              [120.60207, 37.97848],
+              [120.598279, 37.970633],
+              [120.604913, 37.956712],
+              [120.62655, 37.945786]
+            ]
+          ],
+          [
+            [
+              [120.802253, 38.284041],
+              [120.81552, 38.288714],
+              [120.82389, 38.297939],
+              [120.84308, 38.30057],
+              [120.849871, 38.310343],
+              [120.835262, 38.320077],
+              [120.816546, 38.318075],
+              [120.808492, 38.311913],
+              [120.797041, 38.288282],
+              [120.802253, 38.284041]
+            ]
+          ],
+          [
+            [
+              [120.943843, 38.019907],
+              [120.951108, 38.02436],
+              [120.94787, 38.032398],
+              [120.931287, 38.035353],
+              [120.932708, 38.026882],
+              [120.943843, 38.019907]
+            ]
+          ],
+          [
+            [
+              [119.821394, 37.309121],
+              [119.825895, 37.315168],
+              [119.818867, 37.31656],
+              [119.821394, 37.309121]
+            ]
+          ],
+          [
+            [
+              [121.388668, 36.266442],
+              [121.396644, 36.264183],
+              [121.391432, 36.271926],
+              [121.388668, 36.266442]
+            ]
+          ],
+          [
+            [
+              [120.645818, 38.132011],
+              [120.653715, 38.141532],
+              [120.647318, 38.149557],
+              [120.640922, 38.148141],
+              [120.637763, 38.139171],
+              [120.645818, 38.132011]
+            ]
+          ],
+          [
+            [
+              [120.878141, 38.026961],
+              [120.872693, 38.027552],
+              [120.87672, 38.018213],
+              [120.878141, 38.026961]
+            ]
+          ],
+          [
+            [
+              [120.645423, 38.05501],
+              [120.652767, 38.058988],
+              [120.652056, 38.069109],
+              [120.644791, 38.06966],
+              [120.641238, 38.061233],
+              [120.645423, 38.05501]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 370700,
+        "name": "潍坊市",
+        "center": [119.107078, 36.70925],
+        "centroid": [119.077723, 36.554349],
+        "childrenNum": 12,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 6,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [118.507842, 36.074961],
+              [118.522925, 36.084784],
+              [118.529479, 36.093879],
+              [118.526716, 36.104671],
+              [118.504762, 36.105802],
+              [118.509974, 36.114612],
+              [118.515502, 36.109884],
+              [118.535797, 36.118531],
+              [118.541719, 36.124996],
+              [118.556881, 36.130935],
+              [118.565015, 36.130087],
+              [118.563988, 36.147094],
+              [118.572201, 36.156424],
+              [118.581914, 36.151456],
+              [118.606236, 36.164218],
+              [118.622109, 36.17718],
+              [118.640824, 36.171042],
+              [118.644299, 36.177018],
+              [118.653143, 36.176695],
+              [118.666015, 36.168983],
+              [118.675491, 36.170194],
+              [118.683388, 36.158564],
+              [118.679913, 36.152062],
+              [118.701235, 36.144509],
+              [118.703761, 36.150446],
+              [118.714659, 36.154485],
+              [118.72603, 36.141035],
+              [118.736454, 36.146528],
+              [118.73298, 36.1519],
+              [118.733532, 36.166802],
+              [118.741824, 36.165551],
+              [118.751142, 36.183115],
+              [118.745535, 36.191754],
+              [118.766383, 36.206649],
+              [118.78573, 36.197487],
+              [118.802076, 36.202855],
+              [118.809026, 36.198738],
+              [118.835796, 36.203138],
+              [118.847009, 36.199263],
+              [118.848746, 36.188606],
+              [118.844561, 36.18473],
+              [118.846614, 36.172092],
+              [118.85459, 36.170194],
+              [118.859802, 36.16232],
+              [118.858302, 36.143256],
+              [118.863908, 36.139298],
+              [118.858302, 36.129966],
+              [118.860197, 36.114733],
+              [118.865961, 36.113682],
+              [118.860513, 36.101316],
+              [118.875911, 36.091535],
+              [118.880886, 36.08438],
+              [118.886493, 36.088584],
+              [118.908288, 36.091292],
+              [118.920765, 36.105721],
+              [118.916185, 36.111702],
+              [118.936322, 36.11344],
+              [118.943271, 36.119582],
+              [118.954642, 36.1115],
+              [118.958512, 36.104145],
+              [118.970041, 36.104671],
+              [118.970278, 36.09873],
+              [118.988756, 36.092343],
+              [119.000523, 36.099497],
+              [119.013868, 36.09881],
+              [119.020344, 36.104307],
+              [119.038506, 36.090444],
+              [119.048851, 36.092707],
+              [119.066935, 36.081631],
+              [119.063539, 36.075042],
+              [119.049641, 36.066632],
+              [119.042534, 36.055512],
+              [119.040322, 36.042934],
+              [119.052089, 36.037838],
+              [119.047903, 36.024813],
+              [119.035584, 36.02275],
+              [119.024134, 36.02631],
+              [119.017659, 36.024044],
+              [119.014105, 36.013404],
+              [119.023739, 36.011219],
+              [119.024924, 36.003571],
+              [119.015606, 35.995923],
+              [119.021054, 35.977426],
+              [119.05201, 35.9803],
+              [119.060538, 35.978195],
+              [119.066619, 35.963986],
+              [119.07878, 35.959289],
+              [119.088888, 35.963176],
+              [119.121817, 35.962731],
+              [119.134373, 35.968601],
+              [119.153246, 35.971192],
+              [119.155063, 35.965767],
+              [119.178595, 35.97107],
+              [119.182623, 35.962285],
+              [119.179385, 35.926163],
+              [119.183412, 35.91875],
+              [119.169672, 35.91721],
+              [119.151746, 35.905502],
+              [119.144718, 35.904449],
+              [119.135637, 35.892982],
+              [119.158221, 35.882486],
+              [119.161854, 35.894481],
+              [119.169119, 35.894846],
+              [119.190598, 35.879446],
+              [119.217053, 35.879527],
+              [119.240427, 35.884269],
+              [119.281964, 35.910202],
+              [119.294441, 35.911336],
+              [119.298153, 35.893022],
+              [119.315999, 35.887552],
+              [119.345533, 35.893792],
+              [119.360695, 35.884066],
+              [119.371435, 35.860476],
+              [119.358247, 35.84511],
+              [119.372382, 35.830025],
+              [119.374041, 35.816154],
+              [119.368829, 35.770834],
+              [119.375857, 35.770712],
+              [119.390466, 35.778707],
+              [119.397731, 35.786823],
+              [119.427739, 35.802078],
+              [119.444322, 35.804026],
+              [119.455693, 35.809056],
+              [119.464696, 35.80861],
+              [119.482385, 35.799725],
+              [119.493282, 35.789866],
+              [119.496599, 35.779235],
+              [119.48657, 35.771646],
+              [119.48807, 35.754599],
+              [119.504101, 35.752325],
+              [119.525422, 35.730604],
+              [119.527317, 35.723214],
+              [119.545085, 35.726747],
+              [119.560563, 35.721752],
+              [119.566485, 35.714523],
+              [119.576988, 35.71237],
+              [119.588833, 35.715701],
+              [119.601231, 35.709446],
+              [119.614182, 35.716675],
+              [119.624685, 35.712817],
+              [119.627843, 35.722077],
+              [119.605495, 35.747454],
+              [119.591992, 35.753218],
+              [119.596256, 35.773756],
+              [119.611576, 35.776597],
+              [119.617972, 35.789623],
+              [119.60897, 35.799279],
+              [119.612445, 35.812707],
+              [119.622631, 35.816114],
+              [119.629344, 35.833878],
+              [119.649796, 35.845191],
+              [119.664326, 35.841015],
+              [119.676014, 35.842515],
+              [119.68699, 35.861814],
+              [119.704047, 35.863962],
+              [119.71834, 35.853138],
+              [119.725211, 35.856746],
+              [119.72221, 35.865138],
+              [119.736898, 35.86303],
+              [119.738003, 35.873123],
+              [119.727738, 35.902544],
+              [119.721262, 35.906718],
+              [119.716208, 35.927337],
+              [119.701362, 35.923732],
+              [119.701757, 35.944469],
+              [119.690149, 35.963702],
+              [119.684858, 35.982648],
+              [119.689122, 36.000212],
+              [119.681068, 36.012068],
+              [119.706495, 36.028292],
+              [119.717314, 36.044229],
+              [119.704126, 36.055269],
+              [119.695677, 36.053045],
+              [119.675698, 36.064085],
+              [119.666695, 36.062993],
+              [119.633608, 36.067683],
+              [119.632187, 36.091535],
+              [119.657061, 36.100872],
+              [119.657614, 36.108631],
+              [119.643716, 36.127178],
+              [119.651218, 36.130531],
+              [119.649954, 36.137157],
+              [119.660852, 36.154122],
+              [119.671039, 36.177866],
+              [119.681305, 36.18045],
+              [119.691728, 36.176292],
+              [119.723473, 36.175565],
+              [119.732792, 36.172536],
+              [119.733818, 36.163572],
+              [119.748111, 36.158645],
+              [119.772354, 36.167691],
+              [119.782778, 36.165308],
+              [119.792333, 36.171648],
+              [119.813023, 36.167691],
+              [119.81326, 36.175242],
+              [119.821315, 36.171285],
+              [119.82242, 36.177987],
+              [119.831738, 36.180612],
+              [119.823131, 36.19894],
+              [119.828816, 36.210685],
+              [119.819498, 36.211856],
+              [119.808048, 36.232839],
+              [119.82092, 36.244499],
+              [119.820446, 36.257367],
+              [119.82929, 36.258859],
+              [119.83387, 36.278822],
+              [119.848795, 36.292692],
+              [119.854402, 36.302328],
+              [119.862773, 36.302368],
+              [119.865379, 36.308898],
+              [119.891991, 36.318773],
+              [119.896966, 36.334047],
+              [119.895939, 36.34827],
+              [119.904784, 36.369942],
+              [119.90431, 36.38154],
+              [119.909837, 36.384359],
+              [119.93029, 36.385165],
+              [119.936371, 36.380655],
+              [119.945452, 36.384682],
+              [119.941425, 36.39503],
+              [119.926421, 36.403324],
+              [119.925236, 36.419346],
+              [119.933923, 36.42007],
+              [119.935976, 36.427436],
+              [119.949795, 36.446511],
+              [119.953981, 36.444217],
+              [119.968432, 36.450051],
+              [119.994175, 36.450333],
+              [119.996623, 36.446309],
+              [120.011864, 36.454236],
+              [120.012812, 36.467833],
+              [120.006889, 36.468799],
+              [120.004125, 36.477447],
+              [120.010758, 36.484445],
+              [120.004204, 36.489512],
+              [120.010364, 36.509255],
+              [119.997571, 36.504431],
+              [119.974749, 36.515688],
+              [119.971985, 36.522441],
+              [119.951375, 36.519788],
+              [119.936292, 36.511507],
+              [119.936687, 36.496389],
+              [119.923025, 36.495464],
+              [119.920261, 36.522079],
+              [119.917576, 36.525858],
+              [119.826763, 36.54101],
+              [119.798019, 36.551619],
+              [119.784516, 36.554673],
+              [119.755929, 36.565521],
+              [119.74748, 36.571788],
+              [119.72758, 36.562749],
+              [119.730107, 36.581027],
+              [119.701125, 36.602634],
+              [119.681857, 36.606891],
+              [119.670328, 36.616246],
+              [119.651297, 36.623633],
+              [119.625079, 36.638807],
+              [119.617025, 36.652532],
+              [119.61355, 36.66453],
+              [119.607154, 36.667379],
+              [119.596651, 36.689884],
+              [119.587412, 36.696101],
+              [119.579831, 36.711581],
+              [119.567433, 36.713065],
+              [119.561036, 36.720884],
+              [119.547059, 36.725454],
+              [119.534977, 36.743333],
+              [119.530555, 36.765256],
+              [119.532766, 36.78008],
+              [119.539162, 36.787732],
+              [119.539162, 36.799949],
+              [119.550613, 36.80868],
+              [119.563721, 36.802753],
+              [119.56767, 36.805717],
+              [119.597757, 36.857244],
+              [119.599652, 36.878253],
+              [119.599968, 36.920614],
+              [119.5837, 36.950441],
+              [119.598072, 36.989406],
+              [119.604548, 36.996038],
+              [119.60976, 37.013894],
+              [119.613155, 37.034101],
+              [119.606048, 37.04037],
+              [119.563406, 37.058495],
+              [119.559615, 37.071786],
+              [119.576198, 37.087509],
+              [119.568696, 37.100157],
+              [119.576514, 37.127561],
+              [119.51942, 37.130312],
+              [119.503153, 37.128279],
+              [119.493282, 37.133383],
+              [119.493282, 37.143591],
+              [119.481832, 37.155791],
+              [119.479068, 37.153399],
+              [119.489965, 37.142355],
+              [119.489729, 37.13446],
+              [119.445585, 37.130831],
+              [119.425528, 37.125447],
+              [119.36567, 37.126045],
+              [119.351298, 37.122894],
+              [119.342296, 37.11735],
+              [119.329582, 37.115715],
+              [119.320421, 37.120501],
+              [119.30826, 37.136733],
+              [119.299337, 37.142594],
+              [119.297126, 37.158781],
+              [119.291756, 37.164801],
+              [119.291519, 37.177635],
+              [119.298389, 37.19736],
+              [119.296336, 37.20505],
+              [119.282201, 37.21242],
+              [119.261432, 37.207998],
+              [119.244533, 37.211424],
+              [119.232767, 37.221821],
+              [119.222106, 37.225007],
+              [119.206945, 37.223175],
+              [119.204102, 37.21007],
+              [119.205365, 37.194292],
+              [119.191941, 37.197639],
+              [119.194231, 37.221741],
+              [119.204418, 37.246313],
+              [119.202365, 37.253759],
+              [119.191941, 37.254117],
+              [119.190993, 37.259452],
+              [119.212788, 37.273305],
+              [119.20426, 37.280112],
+              [119.136979, 37.231181],
+              [119.128451, 37.235721],
+              [119.141559, 37.262557],
+              [119.142586, 37.279475],
+              [119.15759, 37.281226],
+              [119.166513, 37.27438],
+              [119.16983, 37.278599],
+              [119.157748, 37.288191],
+              [119.139032, 37.288191],
+              [119.135479, 37.282102],
+              [119.134294, 37.263314],
+              [119.128214, 37.254874],
+              [119.108393, 37.260328],
+              [119.091336, 37.257581],
+              [119.084465, 37.239424],
+              [119.066935, 37.241814],
+              [119.054142, 37.254953],
+              [119.052089, 37.276848],
+              [119.045376, 37.298935],
+              [119.039928, 37.304466],
+              [118.856959, 37.293842],
+              [118.821897, 37.288788],
+              [118.777991, 37.280112],
+              [118.728399, 37.252764],
+              [118.709684, 37.241256],
+              [118.680624, 37.229269],
+              [118.672332, 37.215129],
+              [118.668779, 37.198436],
+              [118.660408, 37.187877],
+              [118.649274, 37.189112],
+              [118.645483, 37.178153],
+              [118.633638, 37.171178],
+              [118.634191, 37.163366],
+              [118.64572, 37.159579],
+              [118.649195, 37.164243],
+              [118.653617, 37.149692],
+              [118.673754, 37.144309],
+              [118.667041, 37.11392],
+              [118.668384, 37.091539],
+              [118.665146, 37.081763],
+              [118.655512, 37.082681],
+              [118.654091, 37.076935],
+              [118.632138, 37.070429],
+              [118.631901, 37.066757],
+              [118.610895, 37.063005],
+              [118.591469, 37.068474],
+              [118.580414, 37.063325],
+              [118.561303, 37.063325],
+              [118.557592, 37.051469],
+              [118.56004, 37.041408],
+              [118.545431, 37.038494],
+              [118.545826, 37.023519],
+              [118.57149, 37.022081],
+              [118.588389, 37.017409],
+              [118.583572, 37.008422],
+              [118.590206, 37.001351],
+              [118.571174, 37.004148],
+              [118.566199, 36.999034],
+              [118.580493, 36.994999],
+              [118.564146, 36.99416],
+              [118.553959, 37.000233],
+              [118.552301, 36.979657],
+              [118.559803, 36.977059],
+              [118.557434, 36.96539],
+              [118.560751, 36.946564],
+              [118.55467, 36.938368],
+              [118.537771, 36.936769],
+              [118.52711, 36.939687],
+              [118.524583, 36.945284],
+              [118.503183, 36.944285],
+              [118.503736, 36.95156],
+              [118.47665, 36.957077],
+              [118.467411, 36.945484],
+              [118.494339, 36.941846],
+              [118.492365, 36.931611],
+              [118.496708, 36.924733],
+              [118.48968, 36.914096],
+              [118.481862, 36.914136],
+              [118.474913, 36.905297],
+              [118.483046, 36.900777],
+              [118.482809, 36.879214],
+              [118.476966, 36.876893],
+              [118.465042, 36.861366],
+              [118.479967, 36.860166],
+              [118.480993, 36.852641],
+              [118.460462, 36.846597],
+              [118.461488, 36.854322],
+              [118.453828, 36.857564],
+              [118.450038, 36.83747],
+              [118.435508, 36.838391],
+              [118.44072, 36.828142],
+              [118.438666, 36.809682],
+              [118.424531, 36.802673],
+              [118.419872, 36.796304],
+              [118.388522, 36.791217],
+              [118.350222, 36.768301],
+              [118.321636, 36.770905],
+              [118.318161, 36.77972],
+              [118.307501, 36.776234],
+              [118.297788, 36.777677],
+              [118.298183, 36.753914],
+              [118.279546, 36.753033],
+              [118.27157, 36.744015],
+              [118.276151, 36.731749],
+              [118.284363, 36.72337],
+              [118.277019, 36.719801],
+              [118.264147, 36.72373],
+              [118.254276, 36.731789],
+              [118.234219, 36.726457],
+              [118.227743, 36.717957],
+              [118.237614, 36.712704],
+              [118.227585, 36.697625],
+              [118.238246, 36.697305],
+              [118.245037, 36.690647],
+              [118.228059, 36.694016],
+              [118.21653, 36.6811],
+              [118.215819, 36.668262],
+              [118.226796, 36.668382],
+              [118.230191, 36.660357],
+              [118.221189, 36.664169],
+              [118.215898, 36.648921],
+              [118.199631, 36.639047],
+              [118.20658, 36.637482],
+              [118.214793, 36.621144],
+              [118.200657, 36.612071],
+              [118.189523, 36.599141],
+              [118.180363, 36.593599],
+              [118.176967, 36.582996],
+              [118.180678, 36.577412],
+              [118.180915, 36.5607],
+              [118.183916, 36.561142],
+              [118.191892, 36.546074],
+              [118.214556, 36.539322],
+              [118.221663, 36.531887],
+              [118.210844, 36.526099],
+              [118.213766, 36.513075],
+              [118.210528, 36.503466],
+              [118.218346, 36.497354],
+              [118.212818, 36.490075],
+              [118.216135, 36.478573],
+              [118.229638, 36.467793],
+              [118.233508, 36.456609],
+              [118.22719, 36.451379],
+              [118.232797, 36.432869],
+              [118.228533, 36.430736],
+              [118.224427, 36.414234],
+              [118.227427, 36.408034],
+              [118.250407, 36.411214],
+              [118.251592, 36.401995],
+              [118.235403, 36.389634],
+              [118.239825, 36.376748],
+              [118.256093, 36.363175],
+              [118.262726, 36.352218],
+              [118.261857, 36.345852],
+              [118.269912, 36.339849],
+              [118.300157, 36.338116],
+              [118.291075, 36.326189],
+              [118.304105, 36.321393],
+              [118.30908, 36.307125],
+              [118.315477, 36.304464],
+              [118.310107, 36.295716],
+              [118.317609, 36.288903],
+              [118.31366, 36.277371],
+              [118.315003, 36.266361],
+              [118.306948, 36.252123],
+              [118.31524, 36.24938],
+              [118.350775, 36.263538],
+              [118.368385, 36.248412],
+              [118.379756, 36.245265],
+              [118.386548, 36.239053],
+              [118.382046, 36.207335],
+              [118.374387, 36.203097],
+              [118.387653, 36.174555],
+              [118.402262, 36.162926],
+              [118.405263, 36.141641],
+              [118.402183, 36.131622],
+              [118.412844, 36.127218],
+              [118.428953, 36.132672],
+              [118.440956, 36.132511],
+              [118.447116, 36.140913],
+              [118.457303, 36.13247],
+              [118.462594, 36.14059],
+              [118.487863, 36.131784],
+              [118.492601, 36.127057],
+              [118.479493, 36.118814],
+              [118.484468, 36.104064],
+              [118.478545, 36.098245],
+              [118.482099, 36.092546],
+              [118.48044, 36.074071],
+              [118.496866, 36.067683],
+              [118.507842, 36.074961]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 370800,
+        "name": "济宁市",
+        "center": [116.587245, 35.415393],
+        "centroid": [116.740918, 35.371173],
+        "childrenNum": 11,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 7,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [116.409745, 34.852944],
+              [116.436042, 34.883026],
+              [116.445281, 34.888648],
+              [116.445044, 34.895418],
+              [116.455784, 34.900628],
+              [116.480737, 34.897387],
+              [116.500558, 34.90112],
+              [116.502769, 34.906125],
+              [116.523064, 34.903951],
+              [116.546123, 34.909406],
+              [116.5601, 34.909324],
+              [116.613877, 34.922778],
+              [116.622485, 34.940043],
+              [116.631803, 34.94074],
+              [116.640016, 34.932579],
+              [116.657862, 34.929012],
+              [116.658415, 34.933441],
+              [116.675709, 34.933154],
+              [116.677999, 34.939182],
+              [116.696951, 34.932743],
+              [116.706191, 34.933974],
+              [116.720405, 34.926141],
+              [116.735172, 34.924623],
+              [116.764627, 34.916462],
+              [116.78121, 34.916585],
+              [116.786975, 34.940453],
+              [116.797635, 34.938771],
+              [116.796925, 34.944143],
+              [116.785474, 34.9473],
+              [116.781605, 34.961895],
+              [116.789107, 34.959804],
+              [116.789107, 34.975094],
+              [116.801979, 34.970503],
+              [116.803242, 34.937377],
+              [116.798899, 34.92852],
+              [116.812166, 34.927986],
+              [116.806796, 34.936926],
+              [116.805769, 34.968372],
+              [116.815877, 34.965298],
+              [116.822115, 34.929299],
+              [116.858125, 34.928355],
+              [116.876129, 34.912524],
+              [116.89903, 34.904689],
+              [116.922326, 34.894515],
+              [116.922168, 34.871413],
+              [116.945305, 34.873794],
+              [116.945226, 34.876789],
+              [116.966943, 34.875599],
+              [116.976892, 34.868541],
+              [116.933776, 34.861933],
+              [116.930144, 34.859675],
+              [116.92888, 34.842886],
+              [116.966074, 34.844487],
+              [116.979183, 34.814966],
+              [116.971681, 34.811885],
+              [116.951149, 34.810571],
+              [116.951623, 34.794553],
+              [116.965837, 34.785063],
+              [116.96789, 34.772984],
+              [116.976814, 34.771259],
+              [116.978472, 34.763616],
+              [116.989685, 34.765136],
+              [116.995687, 34.758274],
+              [117.021904, 34.759219],
+              [117.043225, 34.736531],
+              [117.061151, 34.723993],
+              [117.070469, 34.713714],
+              [117.069048, 34.708287],
+              [117.07734, 34.696484],
+              [117.072049, 34.694181],
+              [117.061704, 34.675713],
+              [117.062336, 34.657735],
+              [117.072996, 34.639094],
+              [117.081525, 34.638188],
+              [117.095897, 34.64753],
+              [117.103952, 34.64897],
+              [117.115244, 34.628146],
+              [117.123694, 34.604682],
+              [117.133486, 34.58607],
+              [117.147621, 34.570255],
+              [117.151253, 34.559257],
+              [117.140593, 34.538699],
+              [117.139803, 34.522875],
+              [117.145963, 34.503956],
+              [117.156623, 34.48091],
+              [117.159861, 34.453115],
+              [117.166099, 34.434675],
+              [117.199503, 34.43451],
+              [117.200214, 34.441606],
+              [117.222088, 34.445731],
+              [117.222325, 34.450599],
+              [117.234644, 34.454476],
+              [117.24791, 34.451052],
+              [117.255886, 34.462023],
+              [117.255096, 34.472539],
+              [117.242698, 34.478519],
+              [117.252332, 34.486518],
+              [117.256044, 34.476292],
+              [117.263625, 34.472622],
+              [117.267494, 34.480003],
+              [117.259282, 34.49736],
+              [117.274364, 34.503544],
+              [117.269705, 34.511664],
+              [117.275075, 34.519619],
+              [117.268047, 34.532806],
+              [117.285341, 34.533012],
+              [117.302477, 34.541253],
+              [117.30303, 34.548999],
+              [117.288579, 34.555797],
+              [117.279734, 34.552748],
+              [117.272864, 34.556703],
+              [117.281629, 34.563829],
+              [117.3084, 34.571903],
+              [117.30303, 34.558927],
+              [117.32135, 34.565436],
+              [117.333037, 34.56177],
+              [117.325378, 34.570996],
+              [117.344014, 34.582075],
+              [117.352937, 34.584052],
+              [117.364941, 34.57771],
+              [117.370863, 34.58467],
+              [117.392342, 34.574909],
+              [117.393922, 34.587676],
+              [117.398976, 34.588335],
+              [117.397949, 34.604393],
+              [117.407978, 34.610651],
+              [117.4109, 34.623454],
+              [117.402687, 34.628434],
+              [117.384051, 34.628228],
+              [117.376707, 34.622301],
+              [117.374022, 34.636172],
+              [117.366915, 34.650246],
+              [117.354201, 34.653538],
+              [117.35657, 34.661643],
+              [117.346067, 34.670982],
+              [117.329247, 34.677359],
+              [117.335485, 34.692454],
+              [117.324272, 34.697307],
+              [117.326167, 34.703434],
+              [117.310611, 34.717333],
+              [117.304609, 34.714866],
+              [117.278787, 34.715647],
+              [117.271443, 34.726501],
+              [117.253675, 34.721444],
+              [117.242067, 34.729995],
+              [117.236697, 34.746355],
+              [117.22422, 34.745533],
+              [117.212927, 34.761027],
+              [117.191369, 34.780914],
+              [117.180551, 34.784201],
+              [117.176523, 34.779065],
+              [117.162467, 34.782105],
+              [117.172733, 34.799194],
+              [117.180314, 34.800221],
+              [117.194686, 34.816239],
+              [117.17755, 34.828722],
+              [117.156623, 34.834306],
+              [117.140593, 34.846499],
+              [117.139013, 34.854052],
+              [117.125826, 34.863451],
+              [117.12093, 34.903581],
+              [117.110111, 34.90514],
+              [117.111059, 34.917774],
+              [117.103399, 34.937459],
+              [117.082551, 34.934917],
+              [117.073707, 34.925485],
+              [117.06123, 34.930406],
+              [117.05815, 34.926961],
+              [117.041093, 34.925157],
+              [117.043462, 34.932825],
+              [117.038487, 34.937869],
+              [117.017719, 34.942503],
+              [116.989448, 34.93873],
+              [116.980367, 34.941027],
+              [116.9671, 34.951072],
+              [116.955334, 34.967142],
+              [116.943015, 34.975627],
+              [116.954466, 34.993331],
+              [116.956993, 35.01054],
+              [116.951702, 35.020618],
+              [116.937172, 35.0275],
+              [116.907875, 35.046995],
+              [116.900767, 35.05977],
+              [116.881183, 35.058133],
+              [116.880473, 35.062595],
+              [116.900373, 35.068737],
+              [116.888212, 35.085193],
+              [116.888922, 35.093829],
+              [116.863179, 35.091496],
+              [116.848649, 35.103774],
+              [116.832065, 35.123783],
+              [116.825748, 35.147631],
+              [116.81793, 35.150699],
+              [116.813192, 35.159573],
+              [116.81564, 35.170777],
+              [116.811218, 35.17736],
+              [116.832776, 35.184392],
+              [116.85394, 35.16861],
+              [116.86618, 35.172617],
+              [116.876603, 35.188031],
+              [116.898398, 35.195757],
+              [116.904716, 35.182471],
+              [116.913718, 35.178791],
+              [116.925721, 35.182266],
+              [116.938277, 35.172168],
+              [116.962047, 35.177319],
+              [116.969706, 35.187377],
+              [116.995687, 35.1978],
+              [117.014639, 35.214844],
+              [117.028774, 35.221219],
+              [117.053333, 35.224202],
+              [117.065336, 35.22792],
+              [117.092896, 35.220361],
+              [117.104899, 35.221464],
+              [117.123536, 35.23078],
+              [117.152675, 35.232047],
+              [117.176681, 35.243159],
+              [117.199108, 35.24749],
+              [117.204873, 35.258518],
+              [117.220824, 35.26489],
+              [117.269231, 35.261296],
+              [117.262203, 35.287472],
+              [117.284472, 35.294331],
+              [117.290079, 35.299394],
+              [117.305794, 35.295229],
+              [117.311163, 35.28588],
+              [117.314085, 35.302129],
+              [117.308557, 35.312579],
+              [117.318034, 35.320252],
+              [117.347568, 35.315109],
+              [117.359571, 35.318375],
+              [117.399528, 35.306374],
+              [117.403635, 35.301394],
+              [117.406004, 35.283348],
+              [117.419191, 35.273997],
+              [117.439565, 35.282368],
+              [117.463098, 35.287472],
+              [117.478891, 35.314375],
+              [117.453937, 35.325027],
+              [117.446988, 35.330292],
+              [117.439012, 35.348939],
+              [117.439644, 35.359668],
+              [117.463887, 35.375617],
+              [117.463334, 35.39038],
+              [117.474785, 35.400941],
+              [117.467441, 35.418186],
+              [117.455833, 35.424953],
+              [117.453779, 35.442396],
+              [117.42851, 35.458614],
+              [117.442171, 35.469247],
+              [117.452279, 35.490306],
+              [117.462703, 35.497922],
+              [117.467441, 35.512255],
+              [117.472416, 35.514372],
+              [117.481734, 35.507898],
+              [117.498396, 35.503093],
+              [117.501634, 35.512947],
+              [117.513795, 35.514576],
+              [117.520033, 35.51991],
+              [117.516401, 35.527319],
+              [117.50424, 35.531675],
+              [117.496264, 35.543031],
+              [117.499502, 35.550845],
+              [117.515058, 35.551008],
+              [117.528641, 35.547182],
+              [117.582418, 35.554141],
+              [117.593473, 35.567448],
+              [117.590394, 35.573551],
+              [117.592763, 35.589701],
+              [117.585577, 35.593972],
+              [117.588893, 35.619878],
+              [117.596948, 35.630449],
+              [117.576022, 35.650206],
+              [117.529431, 35.682879],
+              [117.520586, 35.697626],
+              [117.530931, 35.707131],
+              [117.511031, 35.712411],
+              [117.49121, 35.707903],
+              [117.488683, 35.721102],
+              [117.478733, 35.732675],
+              [117.452832, 35.742298],
+              [117.440197, 35.744571],
+              [117.431195, 35.760971],
+              [117.415559, 35.775177],
+              [117.391, 35.767141],
+              [117.379155, 35.775785],
+              [117.364467, 35.770225],
+              [117.350331, 35.782725],
+              [117.343382, 35.784267],
+              [117.341013, 35.793558],
+              [117.318428, 35.793802],
+              [117.306504, 35.798833],
+              [117.297581, 35.788487],
+              [117.260308, 35.771037],
+              [117.226984, 35.773959],
+              [117.21806, 35.778464],
+              [117.200214, 35.775095],
+              [117.175023, 35.780209],
+              [117.163651, 35.775014],
+              [117.143436, 35.771727],
+              [117.135381, 35.767303],
+              [117.128353, 35.769901],
+              [117.139566, 35.777449],
+              [117.131275, 35.786498],
+              [117.103241, 35.790272],
+              [117.097318, 35.802687],
+              [117.083815, 35.80431],
+              [117.070864, 35.790394],
+              [117.049622, 35.801307],
+              [117.0268, 35.799401],
+              [117.009506, 35.807636],
+              [116.991423, 35.805973],
+              [116.993397, 35.794045],
+              [116.974366, 35.760444],
+              [116.952412, 35.7561],
+              [116.946253, 35.744368],
+              [116.952412, 35.737507],
+              [116.954939, 35.719072],
+              [116.949649, 35.715741],
+              [116.931012, 35.713629],
+              [116.930538, 35.709406],
+              [116.91814, 35.706278],
+              [116.909849, 35.699982],
+              [116.897135, 35.701851],
+              [116.88071, 35.696732],
+              [116.879367, 35.685479],
+              [116.861994, 35.679059],
+              [116.836882, 35.697382],
+              [116.8233, 35.696935],
+              [116.8218, 35.705222],
+              [116.811376, 35.706034],
+              [116.808296, 35.69137],
+              [116.802137, 35.684219],
+              [116.805137, 35.679506],
+              [116.778762, 35.679222],
+              [116.777341, 35.690923],
+              [116.770076, 35.703557],
+              [116.762732, 35.708309],
+              [116.739673, 35.703435],
+              [116.702242, 35.709974],
+              [116.698847, 35.72098],
+              [116.68866, 35.724838],
+              [116.664969, 35.716716],
+              [116.648939, 35.713426],
+              [116.627539, 35.705791],
+              [116.615615, 35.705222],
+              [116.612061, 35.71237],
+              [116.614588, 35.74924],
+              [116.619563, 35.756628],
+              [116.636699, 35.764137],
+              [116.662679, 35.758252],
+              [116.670497, 35.761499],
+              [116.687317, 35.798062],
+              [116.686607, 35.814005],
+              [116.676736, 35.822198],
+              [116.647281, 35.832621],
+              [116.617036, 35.855206],
+              [116.614904, 35.865746],
+              [116.62438, 35.878068],
+              [116.647518, 35.884674],
+              [116.666944, 35.898209],
+              [116.672392, 35.92118],
+              [116.676973, 35.925596],
+              [116.665996, 35.940176],
+              [116.62817, 35.938556],
+              [116.618536, 35.935195],
+              [116.599663, 35.916157],
+              [116.595715, 35.905056],
+              [116.566023, 35.899222],
+              [116.55702, 35.890753],
+              [116.549834, 35.857517],
+              [116.53641, 35.847178],
+              [116.525275, 35.847462],
+              [116.520616, 35.853057],
+              [116.515325, 35.841866],
+              [116.507508, 35.84361],
+              [116.486976, 35.84138],
+              [116.475841, 35.83327],
+              [116.468024, 35.836149],
+              [116.459732, 35.828241],
+              [116.459811, 35.81583],
+              [116.436989, 35.807271],
+              [116.428698, 35.796398],
+              [116.421196, 35.799279],
+              [116.400822, 35.794613],
+              [116.385581, 35.801754],
+              [116.377921, 35.796642],
+              [116.362838, 35.795952],
+              [116.355652, 35.800537],
+              [116.336621, 35.796723],
+              [116.32983, 35.787594],
+              [116.309377, 35.77404],
+              [116.301875, 35.777084],
+              [116.297295, 35.795546],
+              [116.304007, 35.799401],
+              [116.277395, 35.806581],
+              [116.274868, 35.803377],
+              [116.250072, 35.823536],
+              [116.245808, 35.834162],
+              [116.233963, 35.851273],
+              [116.230804, 35.860963],
+              [116.233963, 35.888403],
+              [116.221091, 35.892779],
+              [116.218485, 35.879811],
+              [116.214774, 35.889659],
+              [116.20814, 35.886863],
+              [116.190057, 35.892536],
+              [116.185398, 35.900478],
+              [116.166998, 35.90457],
+              [116.161155, 35.900397],
+              [116.154284, 35.886012],
+              [116.142834, 35.895656],
+              [116.126172, 35.891037],
+              [116.09261, 35.904935],
+              [116.081634, 35.914172],
+              [116.086767, 35.923246],
+              [116.074606, 35.927459],
+              [116.07279, 35.940055],
+              [116.05897, 35.936167],
+              [116.048704, 35.948114],
+              [116.060392, 35.956374],
+              [116.065367, 35.964714],
+              [116.061892, 35.97358],
+              [116.0506, 35.981919],
+              [116.048704, 35.970301],
+              [116.038596, 35.963419],
+              [116.00851, 35.973135],
+              [115.985135, 35.974107],
+              [115.957654, 35.967994],
+              [115.911853, 35.960261],
+              [115.906325, 35.9454],
+              [115.909958, 35.935762],
+              [115.907826, 35.926851],
+              [115.875133, 35.920168],
+              [115.872369, 35.909351],
+              [115.884767, 35.909108],
+              [115.88911, 35.897561],
+              [115.883267, 35.895413],
+              [115.882872, 35.879892],
+              [115.876081, 35.875069],
+              [115.876002, 35.867124],
+              [115.875212, 35.835095],
+              [115.877107, 35.820657],
+              [115.883583, 35.808163],
+              [115.898192, 35.805202],
+              [115.911932, 35.811733],
+              [115.925988, 35.804756],
+              [115.922119, 35.799157],
+              [115.945493, 35.791976],
+              [115.970289, 35.782156],
+              [116.017591, 35.756263],
+              [116.026909, 35.749687],
+              [116.041518, 35.733893],
+              [116.071052, 35.719072],
+              [116.079897, 35.712452],
+              [116.089847, 35.699373],
+              [116.103034, 35.687348],
+              [116.121829, 35.67459],
+              [116.127514, 35.649433],
+              [116.134384, 35.638539],
+              [116.115906, 35.618414],
+              [116.116222, 35.606621],
+              [116.125145, 35.59385],
+              [116.125145, 35.587871],
+              [116.114327, 35.577456],
+              [116.115274, 35.566471],
+              [116.123408, 35.540589],
+              [116.12554, 35.516042],
+              [116.121276, 35.497881],
+              [116.128778, 35.489614],
+              [116.129567, 35.475235],
+              [116.15002, 35.469573],
+              [116.160918, 35.471569],
+              [116.15689, 35.446838],
+              [116.167946, 35.452217],
+              [116.178685, 35.450342],
+              [116.177817, 35.466151],
+              [116.188319, 35.477313],
+              [116.188319, 35.467781],
+              [116.19669, 35.46334],
+              [116.206798, 35.465703],
+              [116.20206, 35.458247],
+              [116.204429, 35.436079],
+              [116.215484, 35.435957],
+              [116.215958, 35.419857],
+              [116.212642, 35.409054],
+              [116.215879, 35.393438],
+              [116.223855, 35.371702],
+              [116.22117, 35.358608],
+              [116.215169, 35.350734],
+              [116.201744, 35.345185],
+              [116.193452, 35.337555],
+              [116.199612, 35.304986],
+              [116.215642, 35.29131],
+              [116.223539, 35.260438],
+              [116.237201, 35.261745],
+              [116.265866, 35.271547],
+              [116.269656, 35.269872],
+              [116.285608, 35.242669],
+              [116.284265, 35.22506],
+              [116.269104, 35.191178],
+              [116.248256, 35.195634],
+              [116.234437, 35.208264],
+              [116.234516, 35.200008],
+              [116.228356, 35.194367],
+              [116.213115, 35.196697],
+              [116.221881, 35.181817],
+              [116.223618, 35.173231],
+              [116.214537, 35.155606],
+              [116.204903, 35.145668],
+              [116.181765, 35.11204],
+              [116.154284, 35.113513],
+              [116.141018, 35.09076],
+              [116.15389, 35.088467],
+              [116.140228, 35.06018],
+              [116.141413, 35.055062],
+              [116.119381, 35.053383],
+              [116.114564, 35.039828],
+              [116.115748, 35.025574],
+              [116.139754, 34.995421],
+              [116.170789, 34.974684],
+              [116.171499, 34.964683],
+              [116.162023, 34.957632],
+              [116.155153, 34.947259],
+              [116.162181, 34.94361],
+              [116.192505, 34.939182],
+              [116.201586, 34.919702],
+              [116.213826, 34.913098],
+              [116.226935, 34.911786],
+              [116.266261, 34.89751],
+              [116.286713, 34.88159],
+              [116.299032, 34.877733],
+              [116.325803, 34.874943],
+              [116.335042, 34.868048],
+              [116.3352, 34.862343],
+              [116.363865, 34.861112],
+              [116.373815, 34.86538],
+              [116.409745, 34.852944]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 370900,
+        "name": "泰安市",
+        "center": [117.129063, 36.194968],
+        "centroid": [117.030841, 36.002274],
+        "childrenNum": 6,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 8,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [117.937536, 35.99653],
+              [117.935088, 36.004421],
+              [117.926165, 36.005068],
+              [117.922848, 36.015467],
+              [117.914557, 36.020039],
+              [117.895052, 36.020363],
+              [117.877047, 36.016357],
+              [117.866386, 36.007415],
+              [117.854462, 36.006889],
+              [117.841827, 36.011947],
+              [117.828719, 36.008022],
+              [117.825244, 36.013363],
+              [117.801159, 36.012959],
+              [117.794763, 36.015143],
+              [117.782286, 36.007294],
+              [117.781022, 35.995437],
+              [117.762307, 35.990621],
+              [117.756621, 35.991916],
+              [117.756542, 36.002236],
+              [117.750304, 36.011947],
+              [117.757016, 36.019392],
+              [117.741696, 36.036058],
+              [117.725824, 36.029667],
+              [117.720454, 36.038243],
+              [117.701186, 36.04528],
+              [117.689972, 36.052358],
+              [117.656569, 36.049729],
+              [117.630588, 36.059879],
+              [117.601844, 36.075648],
+              [117.575943, 36.074516],
+              [117.561649, 36.079327],
+              [117.552884, 36.087978],
+              [117.547672, 36.106166],
+              [117.534879, 36.111419],
+              [117.505898, 36.098245],
+              [117.491052, 36.096587],
+              [117.484893, 36.10075],
+              [117.473758, 36.089797],
+              [117.451963, 36.087412],
+              [117.447067, 36.09206],
+              [117.456148, 36.100467],
+              [117.454885, 36.111177],
+              [117.463571, 36.116875],
+              [117.44683, 36.120834],
+              [117.459623, 36.1498],
+              [117.469178, 36.154687],
+              [117.476601, 36.150123],
+              [117.487972, 36.15921],
+              [117.475653, 36.173102],
+              [117.461202, 36.170194],
+              [117.446988, 36.18691],
+              [117.440434, 36.191189],
+              [117.452437, 36.203138],
+              [117.447778, 36.203541],
+              [117.447383, 36.218313],
+              [117.427878, 36.221662],
+              [117.412716, 36.210927],
+              [117.399528, 36.215004],
+              [117.393211, 36.222994],
+              [117.392895, 36.237439],
+              [117.417217, 36.243652],
+              [117.413901, 36.267934],
+              [117.394553, 36.266522],
+              [117.397791, 36.283782],
+              [117.387604, 36.285556],
+              [117.38792, 36.296361],
+              [117.379707, 36.315146],
+              [117.38871, 36.326148],
+              [117.387762, 36.337915],
+              [117.362729, 36.360234],
+              [117.351753, 36.377997],
+              [117.35041, 36.393379],
+              [117.344962, 36.403968],
+              [117.339434, 36.425786],
+              [117.339118, 36.438181],
+              [117.346936, 36.455724],
+              [117.346383, 36.46373],
+              [117.335328, 36.466345],
+              [117.30682, 36.467029],
+              [117.30682, 36.472097],
+              [117.288184, 36.476039],
+              [117.288973, 36.468718],
+              [117.275786, 36.451218],
+              [117.263862, 36.449206],
+              [117.249726, 36.436732],
+              [117.242145, 36.41528],
+              [117.218297, 36.406182],
+              [117.208742, 36.405297],
+              [117.200924, 36.389755],
+              [117.191685, 36.378762],
+              [117.180945, 36.37256],
+              [117.18292, 36.360798],
+              [117.179603, 36.353144],
+              [117.161361, 36.351895],
+              [117.142567, 36.345731],
+              [117.137039, 36.335135],
+              [117.111691, 36.340413],
+              [117.107347, 36.338882],
+              [117.088711, 36.346013],
+              [117.07734, 36.321957],
+              [117.077655, 36.307205],
+              [117.074102, 36.296724],
+              [117.066995, 36.296885],
+              [117.051201, 36.288741],
+              [117.0482, 36.283701],
+              [117.030275, 36.277532],
+              [117.027353, 36.268983],
+              [117.003347, 36.265353],
+              [117.002794, 36.254503],
+              [116.987632, 36.250711],
+              [116.975471, 36.243208],
+              [116.956835, 36.259787],
+              [116.950201, 36.257327],
+              [116.932828, 36.261925],
+              [116.928722, 36.26991],
+              [116.891133, 36.255471],
+              [116.873129, 36.264062],
+              [116.867759, 36.28108],
+              [116.855519, 36.289709],
+              [116.855756, 36.301642],
+              [116.830644, 36.294587],
+              [116.808612, 36.299022],
+              [116.786659, 36.311357],
+              [116.772761, 36.312002],
+              [116.762574, 36.305391],
+              [116.732961, 36.294144],
+              [116.710376, 36.279185],
+              [116.701058, 36.280153],
+              [116.686528, 36.275435],
+              [116.675709, 36.276645],
+              [116.649018, 36.295797],
+              [116.632277, 36.296321],
+              [116.609613, 36.291322],
+              [116.600611, 36.273983],
+              [116.587502, 36.268862],
+              [116.581264, 36.255471],
+              [116.574393, 36.263457],
+              [116.558837, 36.261037],
+              [116.552361, 36.247767],
+              [116.53641, 36.245588],
+              [116.525591, 36.255229],
+              [116.512325, 36.253414],
+              [116.506402, 36.240344],
+              [116.485239, 36.236067],
+              [116.487529, 36.228441],
+              [116.472604, 36.21464],
+              [116.481922, 36.197002],
+              [116.502059, 36.192764],
+              [116.51035, 36.176857],
+              [116.525986, 36.168297],
+              [116.52188, 36.157151],
+              [116.510192, 36.148346],
+              [116.507192, 36.141277],
+              [116.519748, 36.141196],
+              [116.528513, 36.145276],
+              [116.525275, 36.135298],
+              [116.543122, 36.13958],
+              [116.5586, 36.133804],
+              [116.562153, 36.121643],
+              [116.569024, 36.118774],
+              [116.566891, 36.108752],
+              [116.554651, 36.108187],
+              [116.546597, 36.101195],
+              [116.543359, 36.086604],
+              [116.532303, 36.074274],
+              [116.504112, 36.064732],
+              [116.471182, 36.06457],
+              [116.452072, 36.058019],
+              [116.449387, 36.047302],
+              [116.434541, 36.038607],
+              [116.436121, 36.046534],
+              [116.429566, 36.052439],
+              [116.433357, 36.059839],
+              [116.427829, 36.067441],
+              [116.409508, 36.068007],
+              [116.401059, 36.074031],
+              [116.398058, 36.084582],
+              [116.386845, 36.090807],
+              [116.360233, 36.084744],
+              [116.352731, 36.070797],
+              [116.338753, 36.060082],
+              [116.324855, 36.054178],
+              [116.310404, 36.052196],
+              [116.304718, 36.046251],
+              [116.301244, 36.031123],
+              [116.294689, 36.031407],
+              [116.271552, 36.043824],
+              [116.267998, 36.052964],
+              [116.267287, 36.074233],
+              [116.273368, 36.093758],
+              [116.27171, 36.109843],
+              [116.261444, 36.122693],
+              [116.246677, 36.149436],
+              [116.226066, 36.173748],
+              [116.213036, 36.169831],
+              [116.169446, 36.171325],
+              [116.164392, 36.168862],
+              [116.164313, 36.146084],
+              [116.123882, 36.136429],
+              [116.114011, 36.122047],
+              [116.099323, 36.112066],
+              [116.096875, 36.092182],
+              [116.091742, 36.089474],
+              [116.087162, 36.071403],
+              [116.076106, 36.056887],
+              [116.079502, 36.042611],
+              [116.073658, 36.026148],
+              [116.06284, 36.028899],
+              [116.052574, 35.99912],
+              [116.0506, 35.981919],
+              [116.061892, 35.97358],
+              [116.065367, 35.964714],
+              [116.060392, 35.956374],
+              [116.048704, 35.948114],
+              [116.05897, 35.936167],
+              [116.07279, 35.940055],
+              [116.074606, 35.927459],
+              [116.086767, 35.923246],
+              [116.081634, 35.914172],
+              [116.09261, 35.904935],
+              [116.126172, 35.891037],
+              [116.142834, 35.895656],
+              [116.154284, 35.886012],
+              [116.161155, 35.900397],
+              [116.166998, 35.90457],
+              [116.185398, 35.900478],
+              [116.190057, 35.892536],
+              [116.20814, 35.886863],
+              [116.214774, 35.889659],
+              [116.218485, 35.879811],
+              [116.221091, 35.892779],
+              [116.233963, 35.888403],
+              [116.230804, 35.860963],
+              [116.233963, 35.851273],
+              [116.245808, 35.834162],
+              [116.250072, 35.823536],
+              [116.274868, 35.803377],
+              [116.277395, 35.806581],
+              [116.304007, 35.799401],
+              [116.297295, 35.795546],
+              [116.301875, 35.777084],
+              [116.309377, 35.77404],
+              [116.32983, 35.787594],
+              [116.336621, 35.796723],
+              [116.355652, 35.800537],
+              [116.362838, 35.795952],
+              [116.377921, 35.796642],
+              [116.385581, 35.801754],
+              [116.400822, 35.794613],
+              [116.421196, 35.799279],
+              [116.428698, 35.796398],
+              [116.436989, 35.807271],
+              [116.459811, 35.81583],
+              [116.459732, 35.828241],
+              [116.468024, 35.836149],
+              [116.475841, 35.83327],
+              [116.486976, 35.84138],
+              [116.507508, 35.84361],
+              [116.515325, 35.841866],
+              [116.520616, 35.853057],
+              [116.525275, 35.847462],
+              [116.53641, 35.847178],
+              [116.549834, 35.857517],
+              [116.55702, 35.890753],
+              [116.566023, 35.899222],
+              [116.595715, 35.905056],
+              [116.599663, 35.916157],
+              [116.618536, 35.935195],
+              [116.62817, 35.938556],
+              [116.665996, 35.940176],
+              [116.676973, 35.925596],
+              [116.672392, 35.92118],
+              [116.666944, 35.898209],
+              [116.647518, 35.884674],
+              [116.62438, 35.878068],
+              [116.614904, 35.865746],
+              [116.617036, 35.855206],
+              [116.647281, 35.832621],
+              [116.676736, 35.822198],
+              [116.686607, 35.814005],
+              [116.687317, 35.798062],
+              [116.670497, 35.761499],
+              [116.662679, 35.758252],
+              [116.636699, 35.764137],
+              [116.619563, 35.756628],
+              [116.614588, 35.74924],
+              [116.612061, 35.71237],
+              [116.615615, 35.705222],
+              [116.627539, 35.705791],
+              [116.648939, 35.713426],
+              [116.664969, 35.716716],
+              [116.68866, 35.724838],
+              [116.698847, 35.72098],
+              [116.702242, 35.709974],
+              [116.739673, 35.703435],
+              [116.762732, 35.708309],
+              [116.770076, 35.703557],
+              [116.777341, 35.690923],
+              [116.778762, 35.679222],
+              [116.805137, 35.679506],
+              [116.802137, 35.684219],
+              [116.808296, 35.69137],
+              [116.811376, 35.706034],
+              [116.8218, 35.705222],
+              [116.8233, 35.696935],
+              [116.836882, 35.697382],
+              [116.861994, 35.679059],
+              [116.879367, 35.685479],
+              [116.88071, 35.696732],
+              [116.897135, 35.701851],
+              [116.909849, 35.699982],
+              [116.91814, 35.706278],
+              [116.930538, 35.709406],
+              [116.931012, 35.713629],
+              [116.949649, 35.715741],
+              [116.954939, 35.719072],
+              [116.952412, 35.737507],
+              [116.946253, 35.744368],
+              [116.952412, 35.7561],
+              [116.974366, 35.760444],
+              [116.993397, 35.794045],
+              [116.991423, 35.805973],
+              [117.009506, 35.807636],
+              [117.0268, 35.799401],
+              [117.049622, 35.801307],
+              [117.070864, 35.790394],
+              [117.083815, 35.80431],
+              [117.097318, 35.802687],
+              [117.103241, 35.790272],
+              [117.131275, 35.786498],
+              [117.139566, 35.777449],
+              [117.128353, 35.769901],
+              [117.135381, 35.767303],
+              [117.143436, 35.771727],
+              [117.163651, 35.775014],
+              [117.175023, 35.780209],
+              [117.200214, 35.775095],
+              [117.21806, 35.778464],
+              [117.226984, 35.773959],
+              [117.260308, 35.771037],
+              [117.297581, 35.788487],
+              [117.306504, 35.798833],
+              [117.318428, 35.793802],
+              [117.341013, 35.793558],
+              [117.343382, 35.784267],
+              [117.350331, 35.782725],
+              [117.364467, 35.770225],
+              [117.379155, 35.775785],
+              [117.391, 35.767141],
+              [117.415559, 35.775177],
+              [117.431195, 35.760971],
+              [117.440197, 35.744571],
+              [117.452832, 35.742298],
+              [117.478733, 35.732675],
+              [117.488683, 35.721102],
+              [117.49121, 35.707903],
+              [117.511031, 35.712411],
+              [117.530931, 35.707131],
+              [117.520586, 35.697626],
+              [117.529431, 35.682879],
+              [117.576022, 35.650206],
+              [117.596948, 35.630449],
+              [117.599001, 35.649149],
+              [117.605319, 35.674834],
+              [117.62585, 35.703841],
+              [117.634616, 35.709324],
+              [117.663913, 35.70969],
+              [117.679154, 35.713305],
+              [117.707424, 35.726016],
+              [117.732615, 35.71237],
+              [117.754173, 35.709609],
+              [117.769019, 35.726625],
+              [117.781733, 35.734096],
+              [117.811504, 35.732919],
+              [117.823033, 35.739496],
+              [117.837405, 35.741445],
+              [117.833694, 35.760484],
+              [117.828482, 35.773837],
+              [117.831167, 35.786661],
+              [117.846092, 35.796398],
+              [117.840959, 35.812058],
+              [117.828403, 35.821792],
+              [117.827376, 35.827754],
+              [117.842143, 35.84507],
+              [117.85541, 35.850219],
+              [117.86686, 35.86984],
+              [117.883364, 35.882648],
+              [117.906265, 35.884634],
+              [117.924586, 35.880946],
+              [117.937615, 35.874826],
+              [117.960516, 35.87057],
+              [117.968097, 35.884066],
+              [117.97931, 35.889699],
+              [117.981364, 35.906191],
+              [117.988234, 35.908703],
+              [117.99921, 35.925393],
+              [117.997394, 35.934587],
+              [117.988471, 35.947709],
+              [117.984443, 35.956293],
+              [117.992577, 35.971273],
+              [117.971414, 35.969937],
+              [117.953962, 35.957913],
+              [117.947013, 35.960382],
+              [117.947013, 35.971111],
+              [117.937221, 35.98119],
+              [117.937536, 35.99653]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 371000,
+        "name": "威海市",
+        "center": [122.116394, 37.509691],
+        "centroid": [122.000805, 37.118677],
+        "childrenNum": 4,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 9,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [121.923992, 37.473096],
+              [121.933941, 37.452529],
+              [121.925966, 37.441767],
+              [121.91878, 37.420755],
+              [121.908435, 37.400969],
+              [121.90038, 37.391232],
+              [121.882454, 37.381694],
+              [121.870293, 37.368894],
+              [121.865239, 37.336727],
+              [121.859396, 37.329249],
+              [121.834047, 37.318311],
+              [121.822281, 37.303988],
+              [121.815253, 37.300447],
+              [121.794879, 37.30375],
+              [121.790615, 37.299532],
+              [121.792431, 37.288469],
+              [121.784692, 37.268409],
+              [121.778296, 37.260487],
+              [121.7749, 37.248225],
+              [121.757211, 37.247667],
+              [121.74813, 37.241575],
+              [121.748525, 37.223255],
+              [121.755632, 37.220506],
+              [121.754527, 37.212022],
+              [121.761634, 37.217997],
+              [121.769057, 37.196364],
+              [121.759738, 37.19222],
+              [121.760686, 37.178831],
+              [121.749315, 37.176439],
+              [121.753895, 37.172493],
+              [121.761002, 37.177954],
+              [121.767872, 37.170979],
+              [121.747656, 37.135776],
+              [121.737706, 37.136175],
+              [121.733995, 37.125607],
+              [121.699328, 37.125926],
+              [121.694037, 37.141239],
+              [121.683455, 37.141917],
+              [121.688983, 37.133503],
+              [121.682271, 37.13127],
+              [121.683692, 37.123014],
+              [121.678007, 37.121658],
+              [121.669162, 37.110649],
+              [121.666714, 37.12082],
+              [121.654316, 37.121897],
+              [121.639865, 37.131908],
+              [121.638839, 37.139524],
+              [121.628889, 37.137969],
+              [121.625414, 37.131908],
+              [121.612147, 37.125846],
+              [121.600539, 37.141079],
+              [121.590747, 37.144269],
+              [121.585377, 37.132306],
+              [121.590352, 37.128518],
+              [121.589168, 37.116712],
+              [121.580323, 37.10674],
+              [121.574954, 37.110091],
+              [121.547868, 37.104945],
+              [121.49946, 37.104426],
+              [121.465425, 37.12086],
+              [121.447578, 37.123333],
+              [121.441656, 37.12106],
+              [121.427363, 37.100796],
+              [121.391432, 37.098282],
+              [121.382746, 37.112125],
+              [121.376823, 37.115915],
+              [121.369795, 37.110889],
+              [121.351475, 37.126962],
+              [121.363715, 37.129236],
+              [121.358187, 37.140282],
+              [121.348316, 37.135975],
+              [121.34113, 37.127002],
+              [121.326916, 37.12768],
+              [121.317992, 37.132825],
+              [121.314044, 37.141079],
+              [121.306542, 37.141996],
+              [121.287827, 37.136055],
+              [121.26153, 37.117989],
+              [121.246368, 37.102631],
+              [121.243131, 37.092138],
+              [121.204279, 37.07897],
+              [121.191407, 37.072026],
+              [121.192512, 37.052108],
+              [121.188011, 37.041169],
+              [121.188564, 37.029948],
+              [121.19496, 37.027273],
+              [121.194565, 37.019485],
+              [121.181299, 37.016131],
+              [121.177587, 37.003748],
+              [121.182404, 36.99456],
+              [121.19038, 36.996558],
+              [121.209096, 36.985371],
+              [121.222915, 36.986649],
+              [121.22639, 36.971065],
+              [121.233734, 36.956917],
+              [121.248501, 36.953679],
+              [121.252607, 36.938088],
+              [121.263189, 36.926093],
+              [121.272191, 36.927532],
+              [121.282615, 36.918535],
+              [121.304173, 36.918335],
+              [121.308358, 36.905177],
+              [121.312938, 36.904097],
+              [121.347605, 36.920574],
+              [121.360951, 36.921494],
+              [121.366557, 36.903617],
+              [121.36482, 36.897417],
+              [121.385431, 36.877333],
+              [121.363873, 36.871651],
+              [121.357397, 36.864048],
+              [121.357239, 36.852401],
+              [121.36174, 36.841273],
+              [121.373428, 36.840593],
+              [121.376665, 36.830384],
+              [121.396802, 36.803834],
+              [121.395855, 36.794342],
+              [121.409121, 36.790176],
+              [121.417334, 36.792739],
+              [121.450184, 36.790056],
+              [121.462424, 36.784888],
+              [121.478218, 36.770825],
+              [121.480271, 36.784487],
+              [121.504356, 36.797867],
+              [121.506962, 36.803834],
+              [121.522914, 36.80824],
+              [121.530179, 36.818772],
+              [121.539339, 36.823417],
+              [121.565083, 36.830504],
+              [121.569979, 36.827501],
+              [121.554027, 36.81709],
+              [121.546051, 36.806558],
+              [121.528205, 36.805637],
+              [121.496302, 36.792379],
+              [121.481061, 36.780401],
+              [121.482245, 36.77355],
+              [121.505857, 36.770665],
+              [121.507594, 36.760928],
+              [121.517702, 36.761088],
+              [121.520466, 36.749386],
+              [121.53239, 36.753273],
+              [121.547394, 36.74642],
+              [121.546051, 36.741971],
+              [121.532153, 36.736198],
+              [121.531995, 36.731027],
+              [121.542024, 36.734595],
+              [121.565477, 36.728822],
+              [121.574322, 36.737],
+              [121.574638, 36.745538],
+              [121.556317, 36.764294],
+              [121.570531, 36.766257],
+              [121.586009, 36.756399],
+              [121.60125, 36.763412],
+              [121.599671, 36.745578],
+              [121.606067, 36.738122],
+              [121.620834, 36.737241],
+              [121.651473, 36.723851],
+              [121.653527, 36.72798],
+              [121.634416, 36.766858],
+              [121.628968, 36.783245],
+              [121.628494, 36.797306],
+              [121.64176, 36.805757],
+              [121.670742, 36.817651],
+              [121.70683, 36.822296],
+              [121.718517, 36.829223],
+              [121.726256, 36.82626],
+              [121.73818, 36.835068],
+              [121.757606, 36.841753],
+              [121.763766, 36.85084],
+              [121.76195, 36.866049],
+              [121.767714, 36.874852],
+              [121.790457, 36.884255],
+              [121.816121, 36.891856],
+              [121.829388, 36.898057],
+              [121.862791, 36.909256],
+              [121.870846, 36.915736],
+              [121.897616, 36.921694],
+              [121.927545, 36.932371],
+              [121.964818, 36.938128],
+              [121.977611, 36.947163],
+              [121.98306, 36.958436],
+              [121.994668, 36.953719],
+              [122.013936, 36.959994],
+              [122.022464, 36.942006],
+              [122.025307, 36.908856],
+              [122.03731, 36.895817],
+              [122.037784, 36.875492],
+              [122.042522, 36.872011],
+              [122.046234, 36.891176],
+              [122.05342, 36.895697],
+              [122.051998, 36.904977],
+              [122.073636, 36.914376],
+              [122.09322, 36.914136],
+              [122.100801, 36.921934],
+              [122.0993, 36.93289],
+              [122.106486, 36.941686],
+              [122.112409, 36.939607],
+              [122.12765, 36.945484],
+              [122.136731, 36.944325],
+              [122.14139, 36.938288],
+              [122.127176, 36.918535],
+              [122.117463, 36.895737],
+              [122.119674, 36.892096],
+              [122.155999, 36.883055],
+              [122.164291, 36.892536],
+              [122.175662, 36.894537],
+              [122.188534, 36.866209],
+              [122.181427, 36.856323],
+              [122.17203, 36.852441],
+              [122.174714, 36.842474],
+              [122.196115, 36.842874],
+              [122.220437, 36.848919],
+              [122.245865, 36.835428],
+              [122.250603, 36.839912],
+              [122.263869, 36.841633],
+              [122.278162, 36.836189],
+              [122.298141, 36.83707],
+              [122.32657, 36.830424],
+              [122.335414, 36.83767],
+              [122.342758, 36.828502],
+              [122.350655, 36.835228],
+              [122.378373, 36.844275],
+              [122.386506, 36.860046],
+              [122.3839, 36.865368],
+              [122.392587, 36.866209],
+              [122.403326, 36.860686],
+              [122.416119, 36.859485],
+              [122.445732, 36.873052],
+              [122.457025, 36.86913],
+              [122.464448, 36.879294],
+              [122.454498, 36.883535],
+              [122.446601, 36.898217],
+              [122.428833, 36.908856],
+              [122.434124, 36.914256],
+              [122.483005, 36.914056],
+              [122.492639, 36.912176],
+              [122.485453, 36.903777],
+              [122.484663, 36.891536],
+              [122.497061, 36.886095],
+              [122.516408, 36.890256],
+              [122.532123, 36.901457],
+              [122.542468, 36.913536],
+              [122.546574, 36.923494],
+              [122.545863, 36.956317],
+              [122.557551, 36.968707],
+              [122.556919, 36.978898],
+              [122.545232, 36.990205],
+              [122.544837, 37.004587],
+              [122.555971, 37.02324],
+              [122.583373, 37.037296],
+              [122.585268, 37.042965],
+              [122.575634, 37.054423],
+              [122.548706, 37.05091],
+              [122.524226, 37.04033],
+              [122.498641, 37.034301],
+              [122.487901, 37.034301],
+              [122.461447, 37.039532],
+              [122.45963, 37.04584],
+              [122.480083, 37.06105],
+              [122.481031, 37.071786],
+              [122.477951, 37.091539],
+              [122.481189, 37.117829],
+              [122.484505, 37.128877],
+              [122.493113, 37.142036],
+              [122.501562, 37.148695],
+              [122.533544, 37.153359],
+              [122.559762, 37.147419],
+              [122.581083, 37.147738],
+              [122.586374, 37.153519],
+              [122.587243, 37.163684],
+              [122.573344, 37.17624],
+              [122.57903, 37.183493],
+              [122.596877, 37.181262],
+              [122.606274, 37.193057],
+              [122.624042, 37.191144],
+              [122.628859, 37.203456],
+              [122.623963, 37.212739],
+              [122.604063, 37.221462],
+              [122.60043, 37.22895],
+              [122.60043, 37.242212],
+              [122.590638, 37.248065],
+              [122.592454, 37.261284],
+              [122.584716, 37.258736],
+              [122.567185, 37.261164],
+              [122.577056, 37.271395],
+              [122.57137, 37.279037],
+              [122.581083, 37.286957],
+              [122.573897, 37.296349],
+              [122.594192, 37.319822],
+              [122.610459, 37.331119],
+              [122.611486, 37.339431],
+              [122.59356, 37.336289],
+              [122.594823, 37.347981],
+              [122.611486, 37.366907],
+              [122.626884, 37.36957],
+              [122.641809, 37.385867],
+              [122.655629, 37.388292],
+              [122.675134, 37.383761],
+              [122.680662, 37.37438],
+              [122.69456, 37.376328],
+              [122.697877, 37.384118],
+              [122.715802, 37.396121],
+              [122.706958, 37.404108],
+              [122.704273, 37.414955],
+              [122.688558, 37.422423],
+              [122.684847, 37.4287],
+              [122.669527, 37.42858],
+              [122.675923, 37.413326],
+              [122.666526, 37.414438],
+              [122.659735, 37.421589],
+              [122.665816, 37.424251],
+              [122.656655, 37.428461],
+              [122.649548, 37.419881],
+              [122.643862, 37.428064],
+              [122.626648, 37.424688],
+              [122.606511, 37.424131],
+              [122.595929, 37.421152],
+              [122.580293, 37.410187],
+              [122.553602, 37.406929],
+              [122.513408, 37.410703],
+              [122.495245, 37.413683],
+              [122.487348, 37.420278],
+              [122.489559, 37.431917],
+              [122.480952, 37.433665],
+              [122.464684, 37.42441],
+              [122.437046, 37.420358],
+              [122.416751, 37.414676],
+              [122.393376, 37.415114],
+              [122.387375, 37.42],
+              [122.336993, 37.414438],
+              [122.312355, 37.416663],
+              [122.31046, 37.423059],
+              [122.285664, 37.425403],
+              [122.280216, 37.433863],
+              [122.280373, 37.442641],
+              [122.286138, 37.447287],
+              [122.27682, 37.456778],
+              [122.260316, 37.46047],
+              [122.252656, 37.467855],
+              [122.24089, 37.465354],
+              [122.235046, 37.469205],
+              [122.233151, 37.46051],
+              [122.220595, 37.463289],
+              [122.212461, 37.455666],
+              [122.194456, 37.456222],
+              [122.185849, 37.441688],
+              [122.183717, 37.431282],
+              [122.167213, 37.438073],
+              [122.165712, 37.450027],
+              [122.156947, 37.459438],
+              [122.148892, 37.481948],
+              [122.153946, 37.488616],
+              [122.149524, 37.493418],
+              [122.131993, 37.499371],
+              [122.136336, 37.512307],
+              [122.14755, 37.51199],
+              [122.15442, 37.518219],
+              [122.163106, 37.518973],
+              [122.171714, 37.534285],
+              [122.171398, 37.541147],
+              [122.150708, 37.544281],
+              [122.144154, 37.550388],
+              [122.150471, 37.557129],
+              [122.133572, 37.556455],
+              [122.125833, 37.56732],
+              [122.119437, 37.564227],
+              [122.123148, 37.552926],
+              [122.107434, 37.550309],
+              [122.088797, 37.554116],
+              [122.069529, 37.568747],
+              [122.066529, 37.562364],
+              [122.074583, 37.551816],
+              [122.075215, 37.540473],
+              [122.069924, 37.537062],
+              [122.053736, 37.543448],
+              [122.045207, 37.531628],
+              [122.036284, 37.529446],
+              [122.017253, 37.530914],
+              [122.013225, 37.510006],
+              [121.999485, 37.506236],
+              [121.996958, 37.493974],
+              [121.979111, 37.488378],
+              [121.966002, 37.489648],
+              [121.923992, 37.473096]
+            ]
+          ],
+          [
+            [
+              [122.183559, 37.49957],
+              [122.216173, 37.497824],
+              [122.202748, 37.501951],
+              [122.199747, 37.510323],
+              [122.188218, 37.510165],
+              [122.184901, 37.5156],
+              [122.171951, 37.501792],
+              [122.183559, 37.49957]
+            ]
+          ],
+          [
+            [
+              [122.257631, 36.755638],
+              [122.260316, 36.748704],
+              [122.267028, 36.754195],
+              [122.257631, 36.755638]
+            ]
+          ],
+          [
+            [
+              [121.484614, 36.732871],
+              [121.499776, 36.73712],
+              [121.492274, 36.740207],
+              [121.484614, 36.732871]
+            ]
+          ],
+          [
+            [
+              [121.620834, 36.713827],
+              [121.631179, 36.725855],
+              [121.623124, 36.728702],
+              [121.620834, 36.713827]
+            ]
+          ],
+          [
+            [
+              [122.482215, 37.447089],
+              [122.490586, 37.449829],
+              [122.483479, 37.454991],
+              [122.482215, 37.447089]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 371100,
+        "name": "日照市",
+        "center": [119.461208, 35.428588],
+        "centroid": [119.146546, 35.57855],
+        "childrenNum": 4,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 10,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [119.662115, 35.589294],
+              [119.651455, 35.588766],
+              [119.634713, 35.598731],
+              [119.614972, 35.606336],
+              [119.609286, 35.59202],
+              [119.600599, 35.590271],
+              [119.592308, 35.600683],
+              [119.57762, 35.586243],
+              [119.556535, 35.592508],
+              [119.538215, 35.589294],
+              [119.536872, 35.606011],
+              [119.518157, 35.615446],
+              [119.517762, 35.625774],
+              [119.524474, 35.632279],
+              [119.528265, 35.674305],
+              [119.519105, 35.68552],
+              [119.51484, 35.697992],
+              [119.518473, 35.700632],
+              [119.521079, 35.716879],
+              [119.517762, 35.723742],
+              [119.525422, 35.730604],
+              [119.504101, 35.752325],
+              [119.48807, 35.754599],
+              [119.48657, 35.771646],
+              [119.496599, 35.779235],
+              [119.493282, 35.789866],
+              [119.482385, 35.799725],
+              [119.464696, 35.80861],
+              [119.455693, 35.809056],
+              [119.444322, 35.804026],
+              [119.427739, 35.802078],
+              [119.397731, 35.786823],
+              [119.390466, 35.778707],
+              [119.375857, 35.770712],
+              [119.368829, 35.770834],
+              [119.374041, 35.816154],
+              [119.372382, 35.830025],
+              [119.358247, 35.84511],
+              [119.371435, 35.860476],
+              [119.360695, 35.884066],
+              [119.345533, 35.893792],
+              [119.315999, 35.887552],
+              [119.298153, 35.893022],
+              [119.294441, 35.911336],
+              [119.281964, 35.910202],
+              [119.240427, 35.884269],
+              [119.217053, 35.879527],
+              [119.190598, 35.879446],
+              [119.169119, 35.894846],
+              [119.161854, 35.894481],
+              [119.158221, 35.882486],
+              [119.135637, 35.892982],
+              [119.144718, 35.904449],
+              [119.151746, 35.905502],
+              [119.169672, 35.91721],
+              [119.183412, 35.91875],
+              [119.179385, 35.926163],
+              [119.182623, 35.962285],
+              [119.178595, 35.97107],
+              [119.155063, 35.965767],
+              [119.153246, 35.971192],
+              [119.134373, 35.968601],
+              [119.121817, 35.962731],
+              [119.088888, 35.963176],
+              [119.07878, 35.959289],
+              [119.066619, 35.963986],
+              [119.060538, 35.978195],
+              [119.05201, 35.9803],
+              [119.021054, 35.977426],
+              [119.015606, 35.995923],
+              [119.024924, 36.003571],
+              [119.023739, 36.011219],
+              [119.014105, 36.013404],
+              [119.017659, 36.024044],
+              [119.024134, 36.02631],
+              [119.012526, 36.03533],
+              [118.999022, 36.038404],
+              [118.981886, 36.017409],
+              [118.956853, 36.008427],
+              [118.896048, 36.006404],
+              [118.87986, 35.992321],
+              [118.897312, 35.97605],
+              [118.893047, 35.963257],
+              [118.883571, 35.957305],
+              [118.837217, 35.948883],
+              [118.813922, 35.948761],
+              [118.80413, 35.939731],
+              [118.805709, 35.923854],
+              [118.775148, 35.917251],
+              [118.777281, 35.896791],
+              [118.765198, 35.898331],
+              [118.756038, 35.877379],
+              [118.75438, 35.853544],
+              [118.7498, 35.849489],
+              [118.732822, 35.848111],
+              [118.722082, 35.834932],
+              [118.724609, 35.820454],
+              [118.716712, 35.80723],
+              [118.700603, 35.791367],
+              [118.702182, 35.772295],
+              [118.706525, 35.765152],
+              [118.703288, 35.745221],
+              [118.707078, 35.738075],
+              [118.722161, 35.73101],
+              [118.743482, 35.729346],
+              [118.757223, 35.725935],
+              [118.798918, 35.730117],
+              [118.804209, 35.728655],
+              [118.806499, 35.718056],
+              [118.794101, 35.697504],
+              [118.791416, 35.68296],
+              [118.76662, 35.653539],
+              [118.751458, 35.640409],
+              [118.739692, 35.62496],
+              [118.735822, 35.593443],
+              [118.74056, 35.581484],
+              [118.734875, 35.569767],
+              [118.724056, 35.562972],
+              [118.725083, 35.553205],
+              [118.696575, 35.528622],
+              [118.698865, 35.513558],
+              [118.725004, 35.496578],
+              [118.734322, 35.48607],
+              [118.723898, 35.468758],
+              [118.709131, 35.457677],
+              [118.698234, 35.455436],
+              [118.693575, 35.459103],
+              [118.667831, 35.456821],
+              [118.662066, 35.461547],
+              [118.651011, 35.458614],
+              [118.64801, 35.453276],
+              [118.6289, 35.449324],
+              [118.632611, 35.430903],
+              [118.642246, 35.425156],
+              [118.635691, 35.421039],
+              [118.619029, 35.423118],
+              [118.601419, 35.414517],
+              [118.606157, 35.390747],
+              [118.624952, 35.387036],
+              [118.625425, 35.370315],
+              [118.632059, 35.368438],
+              [118.652274, 35.373578],
+              [118.682914, 35.368642],
+              [118.696891, 35.379818],
+              [118.709605, 35.369825],
+              [118.712527, 35.363544],
+              [118.723898, 35.368479],
+              [118.739455, 35.359505],
+              [118.768989, 35.368031],
+              [118.776412, 35.37627],
+              [118.784151, 35.371049],
+              [118.797575, 35.369417],
+              [118.816764, 35.373292],
+              [118.84314, 35.370804],
+              [118.859644, 35.381694],
+              [118.865725, 35.391685],
+              [118.874174, 35.388464],
+              [118.871015, 35.367215],
+              [118.889573, 35.357261],
+              [118.904814, 35.355507],
+              [118.92195, 35.348408],
+              [118.923213, 35.339187],
+              [118.930478, 35.331271],
+              [118.947219, 35.336943],
+              [118.961828, 35.334168],
+              [118.973042, 35.340167],
+              [118.986861, 35.353141],
+              [118.98852, 35.36697],
+              [118.984413, 35.382224],
+              [118.999654, 35.388953],
+              [119.024371, 35.386873],
+              [119.044587, 35.377004],
+              [119.04893, 35.371498],
+              [119.06575, 35.364563],
+              [119.075542, 35.366113],
+              [119.078385, 35.357506],
+              [119.085571, 35.354243],
+              [119.087229, 35.340575],
+              [119.096153, 35.326864],
+              [119.105708, 35.330659],
+              [119.133741, 35.335596],
+              [119.146455, 35.334862],
+              [119.148193, 35.326741],
+              [119.141322, 35.320823],
+              [119.143218, 35.314048],
+              [119.157669, 35.301721],
+              [119.155931, 35.293882],
+              [119.164065, 35.289554],
+              [119.179543, 35.287595],
+              [119.187519, 35.258192],
+              [119.181991, 35.25231],
+              [119.182149, 35.241852],
+              [119.174568, 35.230331],
+              [119.170225, 35.21231],
+              [119.161301, 35.204136],
+              [119.139032, 35.202338],
+              [119.1354, 35.191669],
+              [119.149219, 35.189298],
+              [119.157274, 35.18243],
+              [119.164855, 35.166525],
+              [119.173146, 35.1617],
+              [119.163433, 35.154134],
+              [119.164223, 35.143173],
+              [119.174252, 35.139042],
+              [119.189967, 35.138101],
+              [119.196679, 35.129919],
+              [119.203233, 35.110894],
+              [119.220685, 35.10717],
+              [119.240743, 35.122923],
+              [119.25551, 35.122637],
+              [119.267276, 35.117154],
+              [119.286702, 35.11515],
+              [119.301785, 35.093174],
+              [119.305812, 35.076679],
+              [119.350508, 35.083883],
+              [119.357457, 35.072831],
+              [119.380358, 35.070292],
+              [119.374041, 35.078685],
+              [119.386518, 35.088918],
+              [119.396467, 35.091701],
+              [119.403259, 35.106802],
+              [119.412893, 35.11073],
+              [119.426633, 35.108234],
+              [119.432398, 35.111385],
+              [119.428292, 35.121205],
+              [119.418973, 35.128283],
+              [119.397731, 35.137692],
+              [119.393546, 35.143582],
+              [119.396073, 35.157815],
+              [119.416999, 35.158183],
+              [119.416604, 35.167465],
+              [119.397652, 35.166893],
+              [119.411313, 35.231638],
+              [119.42458, 35.255332],
+              [119.451113, 35.28539],
+              [119.476541, 35.308334],
+              [119.502442, 35.321721],
+              [119.516025, 35.318089],
+              [119.520447, 35.303803],
+              [119.528502, 35.303721],
+              [119.538452, 35.29674],
+              [119.53861, 35.320456],
+              [119.552113, 35.324456],
+              [119.552745, 35.330006],
+              [119.539794, 35.329802],
+              [119.543743, 35.34796],
+              [119.57912, 35.357629],
+              [119.586938, 35.36387],
+              [119.588991, 35.376106],
+              [119.578804, 35.385568],
+              [119.579673, 35.406527],
+              [119.592545, 35.43339],
+              [119.600205, 35.443537],
+              [119.612997, 35.449813],
+              [119.618999, 35.459469],
+              [119.628712, 35.500854],
+              [119.639215, 35.509446],
+              [119.649875, 35.537658],
+              [119.665748, 35.570255],
+              [119.662115, 35.589294]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 371300,
+        "name": "临沂市",
+        "center": [118.326443, 35.065282],
+        "centroid": [118.286421, 35.311899],
+        "childrenNum": 12,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 11,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [119.203233, 35.110894],
+              [119.196679, 35.129919],
+              [119.189967, 35.138101],
+              [119.174252, 35.139042],
+              [119.164223, 35.143173],
+              [119.163433, 35.154134],
+              [119.173146, 35.1617],
+              [119.164855, 35.166525],
+              [119.157274, 35.18243],
+              [119.149219, 35.189298],
+              [119.1354, 35.191669],
+              [119.139032, 35.202338],
+              [119.161301, 35.204136],
+              [119.170225, 35.21231],
+              [119.174568, 35.230331],
+              [119.182149, 35.241852],
+              [119.181991, 35.25231],
+              [119.187519, 35.258192],
+              [119.179543, 35.287595],
+              [119.164065, 35.289554],
+              [119.155931, 35.293882],
+              [119.157669, 35.301721],
+              [119.143218, 35.314048],
+              [119.141322, 35.320823],
+              [119.148193, 35.326741],
+              [119.146455, 35.334862],
+              [119.133741, 35.335596],
+              [119.105708, 35.330659],
+              [119.096153, 35.326864],
+              [119.087229, 35.340575],
+              [119.085571, 35.354243],
+              [119.078385, 35.357506],
+              [119.075542, 35.366113],
+              [119.06575, 35.364563],
+              [119.04893, 35.371498],
+              [119.044587, 35.377004],
+              [119.024371, 35.386873],
+              [118.999654, 35.388953],
+              [118.984413, 35.382224],
+              [118.98852, 35.36697],
+              [118.986861, 35.353141],
+              [118.973042, 35.340167],
+              [118.961828, 35.334168],
+              [118.947219, 35.336943],
+              [118.930478, 35.331271],
+              [118.923213, 35.339187],
+              [118.92195, 35.348408],
+              [118.904814, 35.355507],
+              [118.889573, 35.357261],
+              [118.871015, 35.367215],
+              [118.874174, 35.388464],
+              [118.865725, 35.391685],
+              [118.859644, 35.381694],
+              [118.84314, 35.370804],
+              [118.816764, 35.373292],
+              [118.797575, 35.369417],
+              [118.784151, 35.371049],
+              [118.776412, 35.37627],
+              [118.768989, 35.368031],
+              [118.739455, 35.359505],
+              [118.723898, 35.368479],
+              [118.712527, 35.363544],
+              [118.709605, 35.369825],
+              [118.696891, 35.379818],
+              [118.682914, 35.368642],
+              [118.652274, 35.373578],
+              [118.632059, 35.368438],
+              [118.625425, 35.370315],
+              [118.624952, 35.387036],
+              [118.606157, 35.390747],
+              [118.601419, 35.414517],
+              [118.619029, 35.423118],
+              [118.635691, 35.421039],
+              [118.642246, 35.425156],
+              [118.632611, 35.430903],
+              [118.6289, 35.449324],
+              [118.64801, 35.453276],
+              [118.651011, 35.458614],
+              [118.662066, 35.461547],
+              [118.667831, 35.456821],
+              [118.693575, 35.459103],
+              [118.698234, 35.455436],
+              [118.709131, 35.457677],
+              [118.723898, 35.468758],
+              [118.734322, 35.48607],
+              [118.725004, 35.496578],
+              [118.698865, 35.513558],
+              [118.696575, 35.528622],
+              [118.725083, 35.553205],
+              [118.724056, 35.562972],
+              [118.734875, 35.569767],
+              [118.74056, 35.581484],
+              [118.735822, 35.593443],
+              [118.739692, 35.62496],
+              [118.751458, 35.640409],
+              [118.76662, 35.653539],
+              [118.791416, 35.68296],
+              [118.794101, 35.697504],
+              [118.806499, 35.718056],
+              [118.804209, 35.728655],
+              [118.798918, 35.730117],
+              [118.757223, 35.725935],
+              [118.743482, 35.729346],
+              [118.722161, 35.73101],
+              [118.707078, 35.738075],
+              [118.703288, 35.745221],
+              [118.706525, 35.765152],
+              [118.702182, 35.772295],
+              [118.700603, 35.791367],
+              [118.716712, 35.80723],
+              [118.724609, 35.820454],
+              [118.722082, 35.834932],
+              [118.732822, 35.848111],
+              [118.7498, 35.849489],
+              [118.75438, 35.853544],
+              [118.756038, 35.877379],
+              [118.765198, 35.898331],
+              [118.777281, 35.896791],
+              [118.775148, 35.917251],
+              [118.805709, 35.923854],
+              [118.80413, 35.939731],
+              [118.813922, 35.948761],
+              [118.837217, 35.948883],
+              [118.883571, 35.957305],
+              [118.893047, 35.963257],
+              [118.897312, 35.97605],
+              [118.87986, 35.992321],
+              [118.896048, 36.006404],
+              [118.956853, 36.008427],
+              [118.981886, 36.017409],
+              [118.999022, 36.038404],
+              [119.012526, 36.03533],
+              [119.024134, 36.02631],
+              [119.035584, 36.02275],
+              [119.047903, 36.024813],
+              [119.052089, 36.037838],
+              [119.040322, 36.042934],
+              [119.042534, 36.055512],
+              [119.049641, 36.066632],
+              [119.063539, 36.075042],
+              [119.066935, 36.081631],
+              [119.048851, 36.092707],
+              [119.038506, 36.090444],
+              [119.020344, 36.104307],
+              [119.013868, 36.09881],
+              [119.000523, 36.099497],
+              [118.988756, 36.092343],
+              [118.970278, 36.09873],
+              [118.970041, 36.104671],
+              [118.958512, 36.104145],
+              [118.954642, 36.1115],
+              [118.943271, 36.119582],
+              [118.936322, 36.11344],
+              [118.916185, 36.111702],
+              [118.920765, 36.105721],
+              [118.908288, 36.091292],
+              [118.886493, 36.088584],
+              [118.880886, 36.08438],
+              [118.875911, 36.091535],
+              [118.860513, 36.101316],
+              [118.865961, 36.113682],
+              [118.860197, 36.114733],
+              [118.858302, 36.129966],
+              [118.863908, 36.139298],
+              [118.858302, 36.143256],
+              [118.859802, 36.16232],
+              [118.85459, 36.170194],
+              [118.846614, 36.172092],
+              [118.844561, 36.18473],
+              [118.848746, 36.188606],
+              [118.847009, 36.199263],
+              [118.835796, 36.203138],
+              [118.809026, 36.198738],
+              [118.802076, 36.202855],
+              [118.78573, 36.197487],
+              [118.766383, 36.206649],
+              [118.745535, 36.191754],
+              [118.751142, 36.183115],
+              [118.741824, 36.165551],
+              [118.733532, 36.166802],
+              [118.73298, 36.1519],
+              [118.736454, 36.146528],
+              [118.72603, 36.141035],
+              [118.714659, 36.154485],
+              [118.703761, 36.150446],
+              [118.701235, 36.144509],
+              [118.679913, 36.152062],
+              [118.683388, 36.158564],
+              [118.675491, 36.170194],
+              [118.666015, 36.168983],
+              [118.653143, 36.176695],
+              [118.644299, 36.177018],
+              [118.640824, 36.171042],
+              [118.622109, 36.17718],
+              [118.606236, 36.164218],
+              [118.581914, 36.151456],
+              [118.572201, 36.156424],
+              [118.563988, 36.147094],
+              [118.565015, 36.130087],
+              [118.556881, 36.130935],
+              [118.541719, 36.124996],
+              [118.535797, 36.118531],
+              [118.515502, 36.109884],
+              [118.509974, 36.114612],
+              [118.504762, 36.105802],
+              [118.526716, 36.104671],
+              [118.529479, 36.093879],
+              [118.522925, 36.084784],
+              [118.507842, 36.074961],
+              [118.516608, 36.068573],
+              [118.513449, 36.064085],
+              [118.522214, 36.05349],
+              [118.522609, 36.043622],
+              [118.516845, 36.026107],
+              [118.507447, 36.029789],
+              [118.503341, 36.024246],
+              [118.489206, 36.025784],
+              [118.476097, 36.031407],
+              [118.469859, 36.022992],
+              [118.476571, 36.012797],
+              [118.487074, 36.005797],
+              [118.49268, 35.995437],
+              [118.486521, 35.988759],
+              [118.499393, 35.976212],
+              [118.505157, 35.965808],
+              [118.502157, 35.962488],
+              [118.470964, 35.960868],
+              [118.459356, 35.952689],
+              [118.430612, 35.969694],
+              [118.415213, 35.990783],
+              [118.387021, 35.987586],
+              [118.382283, 35.975078],
+              [118.360725, 35.970908],
+              [118.352828, 35.956698],
+              [118.344774, 35.955888],
+              [118.320136, 35.946575],
+              [118.314134, 35.950827],
+              [118.303552, 35.948923],
+              [118.293523, 35.937503],
+              [118.281362, 35.935964],
+              [118.26928, 35.928512],
+              [118.257593, 35.925717],
+              [118.257119, 35.930699],
+              [118.245906, 35.932157],
+              [118.236904, 35.939245],
+              [118.236351, 35.947749],
+              [118.22569, 35.948235],
+              [118.209897, 35.955767],
+              [118.207054, 35.964391],
+              [118.193787, 35.974026],
+              [118.206106, 35.97864],
+              [118.197578, 36.004947],
+              [118.178388, 36.017005],
+              [118.135588, 36.02364],
+              [118.132666, 36.030436],
+              [118.10937, 36.030031],
+              [118.096104, 36.024246],
+              [118.093261, 36.014618],
+              [118.084338, 36.012149],
+              [118.078415, 36.017652],
+              [118.075888, 36.009034],
+              [118.066807, 36.009155],
+              [118.058989, 35.992968],
+              [118.042248, 35.986371],
+              [118.032693, 35.974268],
+              [118.03293, 35.964998],
+              [118.02298, 35.958965],
+              [118.021084, 35.949004],
+              [117.988471, 35.947709],
+              [117.997394, 35.934587],
+              [117.99921, 35.925393],
+              [117.988234, 35.908703],
+              [117.981364, 35.906191],
+              [117.97931, 35.889699],
+              [117.968097, 35.884066],
+              [117.960516, 35.87057],
+              [117.937615, 35.874826],
+              [117.924586, 35.880946],
+              [117.906265, 35.884634],
+              [117.883364, 35.882648],
+              [117.86686, 35.86984],
+              [117.85541, 35.850219],
+              [117.842143, 35.84507],
+              [117.827376, 35.827754],
+              [117.828403, 35.821792],
+              [117.840959, 35.812058],
+              [117.846092, 35.796398],
+              [117.831167, 35.786661],
+              [117.828482, 35.773837],
+              [117.833694, 35.760484],
+              [117.837405, 35.741445],
+              [117.823033, 35.739496],
+              [117.811504, 35.732919],
+              [117.781733, 35.734096],
+              [117.769019, 35.726625],
+              [117.754173, 35.709609],
+              [117.732615, 35.71237],
+              [117.707424, 35.726016],
+              [117.679154, 35.713305],
+              [117.663913, 35.70969],
+              [117.634616, 35.709324],
+              [117.62585, 35.703841],
+              [117.605319, 35.674834],
+              [117.599001, 35.649149],
+              [117.596948, 35.630449],
+              [117.588893, 35.619878],
+              [117.585577, 35.593972],
+              [117.592763, 35.589701],
+              [117.590394, 35.573551],
+              [117.593473, 35.567448],
+              [117.582418, 35.554141],
+              [117.528641, 35.547182],
+              [117.515058, 35.551008],
+              [117.499502, 35.550845],
+              [117.496264, 35.543031],
+              [117.50424, 35.531675],
+              [117.516401, 35.527319],
+              [117.520033, 35.51991],
+              [117.513795, 35.514576],
+              [117.501634, 35.512947],
+              [117.498396, 35.503093],
+              [117.481734, 35.507898],
+              [117.472416, 35.514372],
+              [117.467441, 35.512255],
+              [117.462703, 35.497922],
+              [117.452279, 35.490306],
+              [117.442171, 35.469247],
+              [117.42851, 35.458614],
+              [117.453779, 35.442396],
+              [117.455833, 35.424953],
+              [117.467441, 35.418186],
+              [117.474785, 35.400941],
+              [117.463334, 35.39038],
+              [117.463887, 35.375617],
+              [117.439644, 35.359668],
+              [117.439012, 35.348939],
+              [117.446988, 35.330292],
+              [117.453937, 35.325027],
+              [117.478891, 35.314375],
+              [117.463098, 35.287472],
+              [117.439565, 35.282368],
+              [117.419191, 35.273997],
+              [117.426456, 35.261786],
+              [117.439486, 35.258927],
+              [117.449752, 35.246795],
+              [117.448331, 35.231842],
+              [117.468073, 35.228369],
+              [117.480628, 35.222771],
+              [117.494843, 35.205893],
+              [117.507162, 35.198986],
+              [117.526825, 35.200621],
+              [117.528009, 35.184351],
+              [117.548462, 35.161741],
+              [117.556043, 35.161291],
+              [117.570336, 35.168365],
+              [117.58376, 35.164317],
+              [117.586208, 35.152989],
+              [117.591025, 35.152539],
+              [117.600344, 35.135524],
+              [117.604371, 35.13401],
+              [117.623007, 35.113063],
+              [117.650725, 35.092724],
+              [117.656885, 35.077497],
+              [117.676469, 35.065543],
+              [117.69321, 35.06018],
+              [117.707345, 35.052318],
+              [117.704423, 35.031227],
+              [117.736247, 35.031514],
+              [117.744618, 35.022748],
+              [117.737985, 35.013203],
+              [117.728035, 35.008041],
+              [117.726534, 34.979561],
+              [117.719506, 34.968331],
+              [117.724323, 34.958329],
+              [117.714689, 34.947833],
+              [117.712004, 34.934999],
+              [117.704265, 34.933605],
+              [117.698501, 34.919989],
+              [117.70466, 34.906699],
+              [117.715163, 34.896238],
+              [117.729298, 34.876994],
+              [117.742407, 34.874163],
+              [117.75291, 34.857623],
+              [117.763175, 34.848839],
+              [117.795315, 34.835907],
+              [117.803686, 34.830734],
+              [117.798632, 34.810653],
+              [117.77739, 34.801248],
+              [117.784023, 34.79484],
+              [117.784576, 34.780667],
+              [117.79958, 34.768875],
+              [117.830614, 34.760246],
+              [117.830061, 34.740888],
+              [117.823665, 34.72868],
+              [117.825244, 34.713139],
+              [117.831719, 34.707793],
+              [117.825639, 34.684392],
+              [117.819243, 34.681842],
+              [117.805818, 34.646254],
+              [117.820111, 34.646172],
+              [117.831798, 34.653455],
+              [117.834483, 34.647324],
+              [117.847513, 34.652386],
+              [117.849408, 34.647201],
+              [117.863465, 34.645184],
+              [117.877916, 34.650205],
+              [117.880995, 34.645184],
+              [117.903106, 34.644567],
+              [117.90974, 34.67016],
+              [117.939669, 34.664852],
+              [117.951672, 34.678469],
+              [117.96328, 34.678552],
+              [117.991708, 34.670077],
+              [117.99084, 34.661726],
+              [118.007423, 34.65613],
+              [118.007818, 34.64753],
+              [118.018242, 34.647036],
+              [118.02069, 34.660409],
+              [118.053935, 34.650945],
+              [118.05741, 34.655019],
+              [118.077783, 34.653702],
+              [118.084022, 34.655924],
+              [118.102658, 34.647736],
+              [118.094603, 34.636583],
+              [118.100526, 34.626582],
+              [118.113003, 34.621437],
+              [118.11474, 34.614397],
+              [118.102816, 34.593441],
+              [118.082363, 34.579893],
+              [118.078968, 34.569761],
+              [118.100447, 34.564736],
+              [118.126428, 34.55522],
+              [118.137167, 34.563253],
+              [118.140721, 34.554025],
+              [118.153671, 34.549164],
+              [118.163542, 34.551471],
+              [118.184706, 34.544179],
+              [118.16757, 34.519701],
+              [118.164964, 34.504904],
+              [118.141826, 34.497154],
+              [118.132824, 34.483425],
+              [118.139931, 34.475344],
+              [118.177757, 34.453238],
+              [118.178862, 34.425186],
+              [118.177125, 34.408722],
+              [118.170413, 34.381356],
+              [118.179336, 34.379416],
+              [118.183363, 34.390355],
+              [118.189602, 34.380654],
+              [118.204369, 34.377352],
+              [118.217714, 34.379127],
+              [118.220241, 34.405957],
+              [118.230981, 34.398693],
+              [118.242431, 34.405709],
+              [118.277414, 34.404677],
+              [118.279862, 34.412188],
+              [118.28918, 34.412271],
+              [118.290681, 34.424567],
+              [118.320925, 34.421349],
+              [118.352197, 34.422834],
+              [118.353223, 34.41747],
+              [118.379993, 34.415531],
+              [118.395155, 34.427084],
+              [118.404947, 34.427744],
+              [118.405342, 34.437027],
+              [118.411344, 34.446391],
+              [118.41624, 34.473859],
+              [118.421372, 34.483219],
+              [118.430928, 34.489074],
+              [118.439535, 34.507996],
+              [118.440956, 34.52477],
+              [118.428322, 34.563253],
+              [118.42382, 34.591094],
+              [118.439219, 34.626294],
+              [118.452881, 34.617691],
+              [118.46362, 34.625265],
+              [118.473807, 34.623412],
+              [118.474913, 34.637201],
+              [118.466463, 34.643127],
+              [118.460856, 34.65757],
+              [118.468437, 34.674315],
+              [118.484231, 34.6709],
+              [118.500814, 34.675178],
+              [118.508158, 34.687066],
+              [118.522688, 34.692289],
+              [118.525215, 34.712563],
+              [118.53935, 34.711494],
+              [118.546063, 34.70619],
+              [118.558934, 34.706847],
+              [118.570464, 34.712522],
+              [118.60134, 34.714167],
+              [118.604894, 34.696484],
+              [118.633717, 34.687025],
+              [118.650537, 34.695086],
+              [118.664357, 34.693441],
+              [118.681335, 34.678346],
+              [118.690258, 34.678593],
+              [118.704077, 34.688752],
+              [118.720108, 34.694222],
+              [118.739376, 34.69377],
+              [118.758723, 34.703434],
+              [118.78344, 34.722061],
+              [118.768515, 34.738093],
+              [118.759197, 34.740847],
+              [118.740087, 34.736901],
+              [118.730374, 34.745451],
+              [118.719239, 34.745533],
+              [118.716475, 34.763821],
+              [118.727215, 34.768752],
+              [118.738507, 34.766862],
+              [118.740166, 34.781243],
+              [118.728399, 34.786871],
+              [118.73756, 34.792088],
+              [118.756512, 34.789541],
+              [118.773569, 34.795333],
+              [118.779018, 34.809627],
+              [118.776649, 34.818785],
+              [118.78194, 34.82749],
+              [118.768278, 34.838822],
+              [118.768989, 34.846129],
+              [118.802471, 34.845637],
+              [118.805235, 34.873055],
+              [118.829715, 34.911129],
+              [118.86075, 34.943979],
+              [118.859249, 34.962633],
+              [118.865093, 34.993208],
+              [118.862487, 35.025697],
+              [118.86533, 35.029834],
+              [118.885782, 35.034258],
+              [118.903787, 35.041343],
+              [118.911131, 35.047773],
+              [118.928504, 35.050885],
+              [118.945166, 35.040811],
+              [118.965619, 35.046462],
+              [118.992152, 35.048182],
+              [118.999891, 35.053055],
+              [119.027214, 35.055307],
+              [119.037401, 35.051335],
+              [119.061407, 35.051581],
+              [119.073647, 35.056659],
+              [119.114631, 35.05498],
+              [119.120396, 35.05801],
+              [119.120475, 35.070088],
+              [119.129477, 35.076187],
+              [119.138085, 35.096285],
+              [119.159011, 35.100991],
+              [119.171409, 35.10717],
+              [119.203233, 35.110894]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 371400,
+        "name": "德州市",
+        "center": [116.307428, 37.453968],
+        "centroid": [116.653941, 37.251267],
+        "childrenNum": 11,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 12,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [117.273417, 37.532619],
+              [117.277681, 37.545391],
+              [117.280682, 37.56621],
+              [117.288973, 37.577112],
+              [117.308321, 37.589956],
+              [117.314875, 37.600458],
+              [117.317797, 37.615081],
+              [117.312585, 37.633701],
+              [117.304925, 37.640514],
+              [117.312506, 37.64194],
+              [117.318428, 37.662019],
+              [117.329405, 37.673343],
+              [117.347489, 37.683319],
+              [117.344567, 37.693136],
+              [117.352543, 37.707345],
+              [117.36573, 37.698361],
+              [117.363598, 37.679559],
+              [117.358149, 37.672947],
+              [117.357596, 37.658495],
+              [117.363835, 37.649624],
+              [117.373074, 37.648594],
+              [117.392974, 37.660039],
+              [117.407188, 37.678846],
+              [117.415401, 37.669582],
+              [117.428825, 37.665741],
+              [117.444224, 37.671918],
+              [117.451963, 37.669978],
+              [117.465625, 37.655564],
+              [117.477075, 37.654416],
+              [117.488604, 37.677025],
+              [117.50345, 37.680548],
+              [117.506451, 37.686803],
+              [117.531247, 37.688901],
+              [117.543092, 37.703625],
+              [117.539775, 37.713993],
+              [117.556201, 37.716683],
+              [117.542618, 37.726258],
+              [117.547198, 37.737494],
+              [117.544119, 37.747699],
+              [117.531563, 37.748213],
+              [117.522165, 37.755371],
+              [117.526509, 37.762964],
+              [117.547356, 37.767512],
+              [117.546567, 37.776368],
+              [117.559912, 37.800008],
+              [117.568599, 37.804987],
+              [117.56623, 37.812733],
+              [117.588025, 37.82273],
+              [117.59529, 37.834741],
+              [117.605003, 37.838968],
+              [117.606582, 37.845209],
+              [117.595685, 37.853504],
+              [117.581076, 37.858993],
+              [117.580602, 37.875302],
+              [117.568835, 37.882409],
+              [117.547198, 37.883198],
+              [117.542776, 37.890146],
+              [117.539302, 37.913552],
+              [117.529036, 37.932295],
+              [117.567809, 37.946772],
+              [117.570652, 37.957264],
+              [117.563545, 37.998585],
+              [117.54933, 38.010252],
+              [117.541039, 38.011237],
+              [117.524377, 37.989479],
+              [117.520902, 37.966729],
+              [117.512847, 37.943459],
+              [117.49271, 37.927481],
+              [117.481181, 37.914854],
+              [117.466809, 37.890739],
+              [117.438539, 37.853859],
+              [117.423614, 37.847263],
+              [117.40632, 37.843511],
+              [117.381919, 37.854531],
+              [117.364704, 37.854136],
+              [117.344251, 37.862666],
+              [117.320166, 37.861402],
+              [117.302951, 37.852358],
+              [117.284472, 37.84675],
+              [117.271364, 37.839916],
+              [117.259755, 37.838257],
+              [117.208821, 37.843748],
+              [117.185368, 37.849791],
+              [117.163651, 37.839798],
+              [117.150148, 37.8396],
+              [117.093765, 37.849515],
+              [117.074339, 37.848725],
+              [117.040541, 37.839324],
+              [117.027195, 37.832371],
+              [117.008874, 37.833872],
+              [116.976656, 37.841062],
+              [116.950359, 37.839719],
+              [116.919325, 37.84592],
+              [116.879604, 37.843748],
+              [116.843753, 37.834465],
+              [116.828038, 37.840627],
+              [116.812718, 37.84359],
+              [116.811771, 37.847935],
+              [116.794556, 37.846987],
+              [116.788159, 37.843432],
+              [116.786185, 37.826326],
+              [116.766838, 37.81135],
+              [116.758941, 37.801865],
+              [116.74599, 37.795778],
+              [116.75365, 37.793011],
+              [116.753808, 37.770517],
+              [116.744174, 37.757349],
+              [116.73912, 37.756914],
+              [116.723169, 37.766721],
+              [116.718826, 37.762331],
+              [116.724511, 37.744297],
+              [116.709586, 37.735199],
+              [116.698768, 37.738759],
+              [116.69932, 37.73065],
+              [116.679736, 37.72879],
+              [116.675235, 37.720838],
+              [116.664022, 37.687793],
+              [116.653677, 37.67754],
+              [116.646412, 37.676233],
+              [116.641042, 37.68233],
+              [116.636462, 37.675877],
+              [116.640884, 37.666454],
+              [116.630776, 37.652713],
+              [116.60448, 37.625105],
+              [116.580316, 37.613258],
+              [116.556547, 37.596852],
+              [116.563496, 37.596495],
+              [116.545807, 37.582504],
+              [116.538463, 37.56843],
+              [116.51959, 37.559905],
+              [116.507113, 37.541822],
+              [116.49969, 37.537855],
+              [116.482633, 37.52179],
+              [116.46218, 37.517426],
+              [116.446702, 37.500562],
+              [116.438648, 37.477224],
+              [116.434146, 37.473334],
+              [116.414089, 37.490997],
+              [116.402164, 37.509847],
+              [116.388661, 37.516315],
+              [116.382738, 37.523615],
+              [116.368919, 37.526392],
+              [116.367892, 37.533809],
+              [116.376895, 37.546581],
+              [116.375473, 37.560341],
+              [116.367655, 37.566289],
+              [116.343491, 37.566011],
+              [116.344913, 37.570492],
+              [116.33591, 37.581235],
+              [116.319406, 37.580046],
+              [116.334805, 37.574773],
+              [116.304481, 37.564505],
+              [116.299664, 37.56958],
+              [116.299348, 37.55935],
+              [116.287898, 37.549317],
+              [116.291373, 37.545589],
+              [116.286082, 37.532619],
+              [116.291373, 37.523813],
+              [116.278422, 37.524765],
+              [116.283555, 37.517584],
+              [116.280317, 37.510879],
+              [116.297532, 37.508816],
+              [116.284344, 37.500721],
+              [116.292952, 37.497387],
+              [116.286082, 37.491117],
+              [116.290899, 37.484766],
+              [116.271473, 37.478931],
+              [116.276448, 37.466902],
+              [116.256469, 37.478812],
+              [116.258285, 37.482662],
+              [116.241307, 37.491434],
+              [116.235068, 37.479725],
+              [116.224803, 37.479963],
+              [116.229936, 37.459676],
+              [116.243597, 37.455904],
+              [116.243123, 37.448201],
+              [116.22733, 37.434261],
+              [116.231515, 37.424529],
+              [116.247151, 37.422066],
+              [116.250072, 37.425919],
+              [116.270999, 37.426714],
+              [116.263023, 37.422423],
+              [116.275026, 37.418252],
+              [116.270446, 37.413802],
+              [116.282923, 37.401326],
+              [116.273052, 37.398425],
+              [116.270446, 37.389126],
+              [116.261602, 37.389802],
+              [116.251652, 37.376566],
+              [116.234437, 37.361221],
+              [116.195506, 37.365674],
+              [116.18524, 37.369928],
+              [116.168814, 37.384118],
+              [116.126646, 37.373466],
+              [116.116459, 37.374301],
+              [116.106588, 37.368815],
+              [116.087557, 37.373307],
+              [116.072474, 37.368099],
+              [116.056206, 37.369053],
+              [116.051942, 37.357484],
+              [116.031252, 37.356411],
+              [116.024461, 37.359949],
+              [116.013643, 37.349571],
+              [116.000376, 37.350804],
+              [116.009457, 37.343169],
+              [115.986951, 37.341738],
+              [115.975738, 37.337283],
+              [115.984503, 37.326067],
+              [115.972974, 37.324039],
+              [115.975659, 37.317515],
+              [115.984346, 37.319265],
+              [115.981503, 37.30737],
+              [115.970763, 37.295553],
+              [115.96871, 37.28632],
+              [115.976212, 37.276171],
+              [115.975185, 37.268967],
+              [115.966973, 37.265742],
+              [115.972895, 37.257103],
+              [115.963972, 37.250096],
+              [115.971079, 37.245636],
+              [115.969421, 37.239464],
+              [115.953232, 37.223693],
+              [115.941387, 37.227716],
+              [115.926778, 37.219511],
+              [115.920934, 37.223534],
+              [115.920145, 37.214173],
+              [115.9098, 37.206803],
+              [115.904825, 37.189391],
+              [115.912485, 37.178751],
+              [115.892269, 37.157625],
+              [115.87995, 37.152004],
+              [115.879397, 37.138647],
+              [115.885399, 37.128757],
+              [115.879476, 37.105583],
+              [115.868263, 37.084038],
+              [115.865025, 37.070828],
+              [115.855154, 37.071108],
+              [115.85626, 37.06073],
+              [115.831938, 37.045281],
+              [115.825778, 37.032384],
+              [115.812354, 37.02895],
+              [115.813222, 37.019126],
+              [115.808089, 37.010259],
+              [115.790874, 37.005985],
+              [115.776265, 36.990884],
+              [115.786373, 36.983093],
+              [115.784478, 36.970625],
+              [115.791743, 36.975261],
+              [115.796876, 36.968747],
+              [115.788189, 36.9526],
+              [115.772791, 36.936849],
+              [115.762683, 36.939327],
+              [115.761972, 36.924413],
+              [115.768684, 36.921014],
+              [115.780293, 36.912216],
+              [115.779819, 36.904977],
+              [115.791348, 36.914336],
+              [115.813064, 36.913416],
+              [115.81875, 36.908577],
+              [115.823251, 36.913496],
+              [115.83178, 36.910856],
+              [115.832964, 36.918575],
+              [115.848995, 36.912656],
+              [115.85397, 36.916215],
+              [115.85855, 36.908337],
+              [115.853733, 36.904777],
+              [115.868421, 36.901457],
+              [115.875844, 36.916255],
+              [115.881687, 36.917575],
+              [115.885241, 36.907017],
+              [115.894796, 36.905657],
+              [115.920461, 36.892976],
+              [115.947704, 36.888576],
+              [116.005667, 36.884375],
+              [116.050126, 36.894497],
+              [116.061892, 36.888576],
+              [116.075948, 36.889496],
+              [116.082424, 36.883855],
+              [116.098217, 36.883895],
+              [116.097349, 36.891336],
+              [116.114958, 36.897697],
+              [116.123724, 36.890656],
+              [116.146388, 36.910776],
+              [116.164392, 36.916975],
+              [116.173237, 36.929692],
+              [116.172842, 36.947723],
+              [116.18366, 36.959595],
+              [116.191478, 36.963312],
+              [116.211536, 36.963112],
+              [116.210588, 36.970146],
+              [116.219196, 36.979617],
+              [116.212089, 36.982454],
+              [116.211694, 36.990085],
+              [116.229225, 36.996438],
+              [116.235779, 37.010139],
+              [116.222276, 37.010339],
+              [116.225592, 37.025396],
+              [116.232857, 37.032225],
+              [116.250388, 37.025476],
+              [116.247624, 37.019685],
+              [116.254731, 37.008262],
+              [116.26784, 37.010499],
+              [116.290741, 36.995759],
+              [116.30535, 36.994999],
+              [116.304955, 36.990245],
+              [116.317037, 36.981854],
+              [116.324065, 36.972024],
+              [116.340175, 36.971944],
+              [116.341359, 36.980256],
+              [116.366471, 36.971864],
+              [116.370261, 36.963272],
+              [116.379343, 36.966309],
+              [116.405876, 36.969107],
+              [116.421117, 36.975661],
+              [116.434383, 36.968228],
+              [116.442675, 36.954319],
+              [116.458074, 36.955358],
+              [116.471103, 36.947043],
+              [116.470551, 36.940007],
+              [116.461548, 36.940687],
+              [116.443149, 36.932211],
+              [116.444728, 36.923694],
+              [116.439911, 36.916495],
+              [116.449308, 36.915496],
+              [116.452467, 36.906417],
+              [116.447966, 36.899977],
+              [116.433988, 36.908417],
+              [116.421591, 36.905257],
+              [116.417958, 36.894297],
+              [116.422143, 36.890536],
+              [116.415905, 36.881374],
+              [116.419537, 36.877213],
+              [116.434146, 36.876453],
+              [116.429645, 36.865208],
+              [116.412746, 36.861086],
+              [116.415352, 36.855923],
+              [116.407218, 36.846717],
+              [116.409587, 36.83759],
+              [116.399874, 36.823857],
+              [116.408008, 36.815729],
+              [116.409193, 36.807038],
+              [116.397663, 36.809441],
+              [116.391978, 36.802913],
+              [116.376026, 36.797025],
+              [116.396242, 36.792459],
+              [116.405639, 36.761208],
+              [116.398295, 36.74149],
+              [116.394505, 36.74169],
+              [116.386055, 36.725294],
+              [116.3964, 36.718318],
+              [116.407139, 36.704804],
+              [116.40706, 36.689042],
+              [116.411246, 36.676647],
+              [116.41322, 36.643181],
+              [116.406034, 36.631983],
+              [116.411325, 36.615242],
+              [116.408166, 36.581349],
+              [116.400427, 36.566365],
+              [116.399243, 36.533736],
+              [116.400901, 36.524813],
+              [116.413062, 36.518743],
+              [116.430277, 36.503707],
+              [116.443149, 36.498238],
+              [116.446071, 36.488909],
+              [116.459258, 36.480061],
+              [116.455705, 36.46192],
+              [116.461548, 36.449971],
+              [116.481685, 36.448361],
+              [116.489345, 36.454477],
+              [116.507271, 36.447999],
+              [116.512798, 36.441239],
+              [116.511851, 36.430012],
+              [116.527092, 36.424337],
+              [116.539647, 36.427597],
+              [116.535857, 36.41842],
+              [116.549518, 36.417333],
+              [116.546202, 36.40892],
+              [116.591213, 36.416286],
+              [116.612377, 36.42333],
+              [116.6198, 36.428522],
+              [116.620905, 36.44144],
+              [116.611429, 36.459104],
+              [116.613009, 36.473425],
+              [116.595636, 36.480383],
+              [116.593267, 36.485973],
+              [116.602032, 36.495223],
+              [116.624301, 36.497233],
+              [116.627223, 36.508853],
+              [116.610087, 36.51609],
+              [116.60835, 36.52011],
+              [116.622801, 36.532651],
+              [116.629592, 36.544587],
+              [116.646728, 36.544105],
+              [116.658968, 36.553026],
+              [116.662916, 36.563111],
+              [116.661258, 36.578376],
+              [116.682421, 36.580586],
+              [116.694345, 36.591149],
+              [116.693319, 36.607895],
+              [116.71314, 36.608858],
+              [116.742042, 36.620381],
+              [116.759494, 36.632746],
+              [116.763126, 36.651971],
+              [116.777262, 36.660718],
+              [116.780736, 36.671552],
+              [116.780657, 36.691048],
+              [116.799689, 36.694417],
+              [116.802768, 36.706729],
+              [116.830881, 36.723851],
+              [116.842489, 36.72786],
+              [116.861757, 36.730345],
+              [116.873997, 36.739846],
+              [116.88679, 36.745538],
+              [116.883868, 36.758243],
+              [116.87076, 36.759164],
+              [116.865548, 36.777877],
+              [116.868233, 36.801872],
+              [116.872813, 36.812004],
+              [116.887975, 36.811404],
+              [116.882447, 36.824058],
+              [116.887106, 36.833427],
+              [116.892476, 36.830023],
+              [116.919404, 36.822776],
+              [116.933223, 36.823697],
+              [116.935908, 36.829743],
+              [116.934724, 36.845116],
+              [116.9442, 36.844916],
+              [116.948069, 36.839231],
+              [116.962836, 36.842674],
+              [116.96181, 36.867529],
+              [116.963152, 36.893896],
+              [116.957466, 36.916495],
+              [116.934408, 36.925973],
+              [116.922563, 36.93453],
+              [116.935434, 36.93457],
+              [116.931881, 36.946204],
+              [116.933381, 36.959595],
+              [116.907717, 36.963272],
+              [116.897767, 36.962712],
+              [116.899188, 36.977499],
+              [116.886158, 36.983573],
+              [116.885764, 36.991444],
+              [116.875024, 36.999274],
+              [116.891607, 37.00271],
+              [116.907796, 37.019046],
+              [116.943173, 37.030907],
+              [116.948701, 37.036537],
+              [116.944279, 37.042327],
+              [116.928643, 37.05103],
+              [116.925247, 37.069831],
+              [116.91972, 37.081364],
+              [116.919009, 37.093056],
+              [116.931486, 37.100477],
+              [116.982578, 37.113601],
+              [117.004531, 37.121219],
+              [117.024273, 37.119664],
+              [117.044884, 37.122615],
+              [117.047411, 37.134739],
+              [117.059809, 37.137251],
+              [117.054676, 37.141717],
+              [117.050648, 37.160894],
+              [117.061783, 37.16496],
+              [117.06352, 37.182656],
+              [117.05744, 37.192141],
+              [117.045358, 37.197161],
+              [117.037382, 37.195169],
+              [117.037777, 37.207361],
+              [117.022299, 37.215089],
+              [117.03596, 37.224091],
+              [117.036592, 37.237393],
+              [117.042673, 37.238867],
+              [117.041251, 37.247667],
+              [117.032328, 37.253241],
+              [117.030275, 37.264229],
+              [117.038961, 37.266538],
+              [117.024273, 37.278918],
+              [117.002241, 37.285962],
+              [116.993397, 37.32201],
+              [116.986684, 37.335335],
+              [116.987158, 37.342692],
+              [117.006663, 37.355138],
+              [117.009664, 37.359671],
+              [116.99924, 37.376964],
+              [117.008164, 37.392464],
+              [117.019693, 37.405379],
+              [117.012112, 37.419643],
+              [117.01843, 37.435849],
+              [117.03067, 37.442958],
+              [117.038408, 37.435452],
+              [117.089264, 37.435055],
+              [117.102293, 37.445778],
+              [117.104978, 37.455309],
+              [117.098819, 37.469721],
+              [117.109795, 37.47901],
+              [117.124878, 37.483853],
+              [117.135618, 37.475239],
+              [117.163809, 37.478971],
+              [117.176049, 37.486116],
+              [117.199345, 37.487148],
+              [117.22114, 37.51318],
+              [117.230063, 37.528891],
+              [117.238197, 37.532897],
+              [117.260861, 37.530081],
+              [117.273417, 37.532619]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 371500,
+        "name": "聊城市",
+        "center": [115.980367, 36.456013],
+        "centroid": [115.887682, 36.460117],
+        "childrenNum": 8,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 13,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [116.546202, 36.40892],
+              [116.549518, 36.417333],
+              [116.535857, 36.41842],
+              [116.539647, 36.427597],
+              [116.527092, 36.424337],
+              [116.511851, 36.430012],
+              [116.512798, 36.441239],
+              [116.507271, 36.447999],
+              [116.489345, 36.454477],
+              [116.481685, 36.448361],
+              [116.461548, 36.449971],
+              [116.455705, 36.46192],
+              [116.459258, 36.480061],
+              [116.446071, 36.488909],
+              [116.443149, 36.498238],
+              [116.430277, 36.503707],
+              [116.413062, 36.518743],
+              [116.400901, 36.524813],
+              [116.399243, 36.533736],
+              [116.400427, 36.566365],
+              [116.408166, 36.581349],
+              [116.411325, 36.615242],
+              [116.406034, 36.631983],
+              [116.41322, 36.643181],
+              [116.411246, 36.676647],
+              [116.40706, 36.689042],
+              [116.407139, 36.704804],
+              [116.3964, 36.718318],
+              [116.386055, 36.725294],
+              [116.394505, 36.74169],
+              [116.398295, 36.74149],
+              [116.405639, 36.761208],
+              [116.396242, 36.792459],
+              [116.376026, 36.797025],
+              [116.391978, 36.802913],
+              [116.397663, 36.809441],
+              [116.409193, 36.807038],
+              [116.408008, 36.815729],
+              [116.399874, 36.823857],
+              [116.409587, 36.83759],
+              [116.407218, 36.846717],
+              [116.415352, 36.855923],
+              [116.412746, 36.861086],
+              [116.429645, 36.865208],
+              [116.434146, 36.876453],
+              [116.419537, 36.877213],
+              [116.415905, 36.881374],
+              [116.422143, 36.890536],
+              [116.417958, 36.894297],
+              [116.421591, 36.905257],
+              [116.433988, 36.908417],
+              [116.447966, 36.899977],
+              [116.452467, 36.906417],
+              [116.449308, 36.915496],
+              [116.439911, 36.916495],
+              [116.444728, 36.923694],
+              [116.443149, 36.932211],
+              [116.461548, 36.940687],
+              [116.470551, 36.940007],
+              [116.471103, 36.947043],
+              [116.458074, 36.955358],
+              [116.442675, 36.954319],
+              [116.434383, 36.968228],
+              [116.421117, 36.975661],
+              [116.405876, 36.969107],
+              [116.379343, 36.966309],
+              [116.370261, 36.963272],
+              [116.366471, 36.971864],
+              [116.341359, 36.980256],
+              [116.340175, 36.971944],
+              [116.324065, 36.972024],
+              [116.317037, 36.981854],
+              [116.304955, 36.990245],
+              [116.30535, 36.994999],
+              [116.290741, 36.995759],
+              [116.26784, 37.010499],
+              [116.254731, 37.008262],
+              [116.247624, 37.019685],
+              [116.250388, 37.025476],
+              [116.232857, 37.032225],
+              [116.225592, 37.025396],
+              [116.222276, 37.010339],
+              [116.235779, 37.010139],
+              [116.229225, 36.996438],
+              [116.211694, 36.990085],
+              [116.212089, 36.982454],
+              [116.219196, 36.979617],
+              [116.210588, 36.970146],
+              [116.211536, 36.963112],
+              [116.191478, 36.963312],
+              [116.18366, 36.959595],
+              [116.172842, 36.947723],
+              [116.173237, 36.929692],
+              [116.164392, 36.916975],
+              [116.146388, 36.910776],
+              [116.123724, 36.890656],
+              [116.114958, 36.897697],
+              [116.097349, 36.891336],
+              [116.098217, 36.883895],
+              [116.082424, 36.883855],
+              [116.075948, 36.889496],
+              [116.061892, 36.888576],
+              [116.050126, 36.894497],
+              [116.005667, 36.884375],
+              [115.947704, 36.888576],
+              [115.920461, 36.892976],
+              [115.894796, 36.905657],
+              [115.885241, 36.907017],
+              [115.881687, 36.917575],
+              [115.875844, 36.916255],
+              [115.868421, 36.901457],
+              [115.853733, 36.904777],
+              [115.85855, 36.908337],
+              [115.85397, 36.916215],
+              [115.848995, 36.912656],
+              [115.832964, 36.918575],
+              [115.83178, 36.910856],
+              [115.823251, 36.913496],
+              [115.81875, 36.908577],
+              [115.813064, 36.913416],
+              [115.791348, 36.914336],
+              [115.779819, 36.904977],
+              [115.780293, 36.912216],
+              [115.768684, 36.921014],
+              [115.765131, 36.909096],
+              [115.757787, 36.903017],
+              [115.740572, 36.906417],
+              [115.735202, 36.897017],
+              [115.726121, 36.893616],
+              [115.711275, 36.882374],
+              [115.699982, 36.866929],
+              [115.700772, 36.860726],
+              [115.688532, 36.840312],
+              [115.692243, 36.829343],
+              [115.684189, 36.812966],
+              [115.671554, 36.809281],
+              [115.666184, 36.812485],
+              [115.650469, 36.807519],
+              [115.63744, 36.797506],
+              [115.584689, 36.781042],
+              [115.572133, 36.775353],
+              [115.560525, 36.783806],
+              [115.561315, 36.775753],
+              [115.552628, 36.775874],
+              [115.54947, 36.782885],
+              [115.53873, 36.784127],
+              [115.536835, 36.772628],
+              [115.52878, 36.77395],
+              [115.523568, 36.763853],
+              [115.506511, 36.770465],
+              [115.491428, 36.761609],
+              [115.478398, 36.758804],
+              [115.475477, 36.744215],
+              [115.460947, 36.731869],
+              [115.459762, 36.717395],
+              [115.450523, 36.713626],
+              [115.451391, 36.702197],
+              [115.446653, 36.694617],
+              [115.420594, 36.686756],
+              [115.412144, 36.676486],
+              [115.406459, 36.663246],
+              [115.386322, 36.656305],
+              [115.38798, 36.646432],
+              [115.378504, 36.632866],
+              [115.366027, 36.621947],
+              [115.35513, 36.627407],
+              [115.345022, 36.612392],
+              [115.350707, 36.60665],
+              [115.341468, 36.603478],
+              [115.340363, 36.595245],
+              [115.351576, 36.595004],
+              [115.35055, 36.590065],
+              [115.337836, 36.58898],
+              [115.334282, 36.582473],
+              [115.331281, 36.550213],
+              [115.307433, 36.527426],
+              [115.300484, 36.525938],
+              [115.295035, 36.533254],
+              [115.288323, 36.528511],
+              [115.295193, 36.523205],
+              [115.292587, 36.514401],
+              [115.296536, 36.508853],
+              [115.289744, 36.497796],
+              [115.272845, 36.497394],
+              [115.276083, 36.486938],
+              [115.283506, 36.486416],
+              [115.28469, 36.476441],
+              [115.293693, 36.476079],
+              [115.288876, 36.470006],
+              [115.291403, 36.460592],
+              [115.300247, 36.465902],
+              [115.317067, 36.454035],
+              [115.316909, 36.432587],
+              [115.312092, 36.433593],
+              [115.297404, 36.413469],
+              [115.313514, 36.406625],
+              [115.324885, 36.405095],
+              [115.339968, 36.39809],
+              [115.348575, 36.384641],
+              [115.349602, 36.363094],
+              [115.368712, 36.342629],
+              [115.370449, 36.332757],
+              [115.359789, 36.318733],
+              [115.366659, 36.308938],
+              [115.394614, 36.322602],
+              [115.414987, 36.326551],
+              [115.422963, 36.322199],
+              [115.41941, 36.310914],
+              [115.422963, 36.30261],
+              [115.41704, 36.292773],
+              [115.428491, 36.286201],
+              [115.436388, 36.276362],
+              [115.446101, 36.273782],
+              [115.462684, 36.27612],
+              [115.468922, 36.265353],
+              [115.465369, 36.250389],
+              [115.476503, 36.246516],
+              [115.47595, 36.218878],
+              [115.479109, 36.209555],
+              [115.47595, 36.193046],
+              [115.480689, 36.171729],
+              [115.48519, 36.139702],
+              [115.484242, 36.125845],
+              [115.473976, 36.098123],
+              [115.468843, 36.092222],
+              [115.466395, 36.079691],
+              [115.459762, 36.080378],
+              [115.455103, 36.071282],
+              [115.459604, 36.063357],
+              [115.441599, 36.055755],
+              [115.448865, 36.047383],
+              [115.447522, 36.011826],
+              [115.4431, 36.008872],
+              [115.419646, 36.004745],
+              [115.395956, 35.991673],
+              [115.386322, 35.974471],
+              [115.363105, 35.972002],
+              [115.356472, 35.954633],
+              [115.354182, 35.937503],
+              [115.364132, 35.929484],
+              [115.367449, 35.92033],
+              [115.36429, 35.894035],
+              [115.354893, 35.869273],
+              [115.3436, 35.87215],
+              [115.338152, 35.864692],
+              [115.349602, 35.860963],
+              [115.344074, 35.838744],
+              [115.335704, 35.814329],
+              [115.334993, 35.796723],
+              [115.3635, 35.779925],
+              [115.370923, 35.788852],
+              [115.407564, 35.80865],
+              [115.417909, 35.824996],
+              [115.432834, 35.833878],
+              [115.433861, 35.839069],
+              [115.460078, 35.867732],
+              [115.488033, 35.880784],
+              [115.495377, 35.896021],
+              [115.490717, 35.908379],
+              [115.505406, 35.914415],
+              [115.510775, 35.908014],
+              [115.504932, 35.8991],
+              [115.513302, 35.890348],
+              [115.548206, 35.898006],
+              [115.583742, 35.921707],
+              [115.607353, 35.925839],
+              [115.642415, 35.920046],
+              [115.651812, 35.928917],
+              [115.675423, 35.938435],
+              [115.68411, 35.944388],
+              [115.686953, 35.9552],
+              [115.698719, 35.96605],
+              [115.717908, 35.971394],
+              [115.73307, 35.96682],
+              [115.764341, 35.970989],
+              [115.774686, 35.974511],
+              [115.774528, 35.981878],
+              [115.786689, 35.991228],
+              [115.779819, 35.993778],
+              [115.797508, 36.00697],
+              [115.81725, 36.012756],
+              [115.837465, 36.011016],
+              [115.846231, 36.004987],
+              [115.859655, 36.003693],
+              [115.869447, 36.015346],
+              [115.895981, 36.026188],
+              [115.919276, 36.019675],
+              [115.935859, 36.031447],
+              [115.964051, 36.0416],
+              [115.989794, 36.045442],
+              [116.016406, 36.061375],
+              [116.028804, 36.072292],
+              [116.057391, 36.104913],
+              [116.099323, 36.112066],
+              [116.114011, 36.122047],
+              [116.123882, 36.136429],
+              [116.164313, 36.146084],
+              [116.164392, 36.168862],
+              [116.169446, 36.171325],
+              [116.213036, 36.169831],
+              [116.226066, 36.173748],
+              [116.234911, 36.180935],
+              [116.255047, 36.203703],
+              [116.280159, 36.221945],
+              [116.28624, 36.239174],
+              [116.307166, 36.259464],
+              [116.310799, 36.270515],
+              [116.322644, 36.284669],
+              [116.331251, 36.290677],
+              [116.374526, 36.3039],
+              [116.406745, 36.319015],
+              [116.430593, 36.318007],
+              [116.441411, 36.321755],
+              [116.449071, 36.337149],
+              [116.484607, 36.336948],
+              [116.503717, 36.369982],
+              [116.519984, 36.384158],
+              [116.528592, 36.387259],
+              [116.546202, 36.40892]
+            ]
+          ],
+          [
+            [
+              [115.495377, 35.896021],
+              [115.488033, 35.880784],
+              [115.503431, 35.888686],
+              [115.513302, 35.890348],
+              [115.504932, 35.8991],
+              [115.495377, 35.896021]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 371600,
+        "name": "滨州市",
+        "center": [118.016974, 37.383542],
+        "centroid": [117.847293, 37.542609],
+        "childrenNum": 7,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 14,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [117.273417, 37.532619],
+              [117.275549, 37.526193],
+              [117.284393, 37.522266],
+              [117.286525, 37.510046],
+              [117.307215, 37.507744],
+              [117.317718, 37.499371],
+              [117.312585, 37.487068],
+              [117.285894, 37.479328],
+              [117.283998, 37.471587],
+              [117.304609, 37.466069],
+              [117.307768, 37.46194],
+              [117.295449, 37.4538],
+              [117.309189, 37.447486],
+              [117.353332, 37.450901],
+              [117.369758, 37.436048],
+              [117.368257, 37.419563],
+              [117.360202, 37.405697],
+              [117.368652, 37.396399],
+              [117.401029, 37.379071],
+              [117.415401, 37.364203],
+              [117.407741, 37.353667],
+              [117.413901, 37.349333],
+              [117.409005, 37.321692],
+              [117.417612, 37.296587],
+              [117.430168, 37.285166],
+              [117.432379, 37.272032],
+              [117.43688, 37.27235],
+              [117.438302, 37.25786],
+              [117.443908, 37.250056],
+              [117.431037, 37.254396],
+              [117.424403, 37.243367],
+              [117.429141, 37.239783],
+              [117.408768, 37.239703],
+              [117.402371, 37.224808],
+              [117.404977, 37.21716],
+              [117.417928, 37.20003],
+              [117.436091, 37.184251],
+              [117.442724, 37.170859],
+              [117.444066, 37.156868],
+              [117.4507, 37.153957],
+              [117.4507, 37.143711],
+              [117.455596, 37.11767],
+              [117.459781, 37.109931],
+              [117.442092, 37.093574],
+              [117.409241, 37.089425],
+              [117.391158, 37.083479],
+              [117.365256, 37.069272],
+              [117.336433, 37.073941],
+              [117.339434, 37.056419],
+              [117.33667, 37.046838],
+              [117.326088, 37.036178],
+              [117.315349, 37.030547],
+              [117.317323, 37.020923],
+              [117.328457, 37.011218],
+              [117.35349, 37.003349],
+              [117.365335, 36.99496],
+              [117.378286, 36.956997],
+              [117.391632, 36.952],
+              [117.40403, 36.955038],
+              [117.406162, 36.950001],
+              [117.414927, 36.957236],
+              [117.416901, 36.95264],
+              [117.444461, 36.958116],
+              [117.458754, 36.957676],
+              [117.477628, 36.961154],
+              [117.476522, 36.968348],
+              [117.494527, 36.972344],
+              [117.509847, 36.969267],
+              [117.519875, 36.957117],
+              [117.536854, 36.978498],
+              [117.549094, 36.979817],
+              [117.555253, 36.970785],
+              [117.54933, 36.96507],
+              [117.56544, 36.959954],
+              [117.56465, 36.945084],
+              [117.553674, 36.940727],
+              [117.551305, 36.93385],
+              [117.539538, 36.941486],
+              [117.534248, 36.931611],
+              [117.56923, 36.915736],
+              [117.58376, 36.894176],
+              [117.585024, 36.886815],
+              [117.579891, 36.878093],
+              [117.577364, 36.862847],
+              [117.580523, 36.85136],
+              [117.608556, 36.821815],
+              [117.648119, 36.805436],
+              [117.677811, 36.783245],
+              [117.687603, 36.763853],
+              [117.695974, 36.754115],
+              [117.724165, 36.755998],
+              [117.747303, 36.748584],
+              [117.736642, 36.729423],
+              [117.739959, 36.721004],
+              [117.71848, 36.704724],
+              [117.718006, 36.697826],
+              [117.725666, 36.695219],
+              [117.754173, 36.696944],
+              [117.777942, 36.695219],
+              [117.78197, 36.70304],
+              [117.793025, 36.707451],
+              [117.795157, 36.719761],
+              [117.810161, 36.734394],
+              [117.820743, 36.756359],
+              [117.826429, 36.763011],
+              [117.834404, 36.751871],
+              [117.832983, 36.744816],
+              [117.852488, 36.750708],
+              [117.850672, 36.764735],
+              [117.840327, 36.777516],
+              [117.825639, 36.775834],
+              [117.824297, 36.787933],
+              [117.815531, 36.788573],
+              [117.814662, 36.797306],
+              [117.820901, 36.801511],
+              [117.822085, 36.825139],
+              [117.831877, 36.836629],
+              [117.828008, 36.855883],
+              [117.832825, 36.859966],
+              [117.856594, 36.859926],
+              [117.865597, 36.866529],
+              [117.875152, 36.861246],
+              [117.891103, 36.864408],
+              [117.891814, 36.871811],
+              [117.917005, 36.86973],
+              [117.9189, 36.880094],
+              [117.929719, 36.890216],
+              [117.940616, 36.891616],
+              [117.9403, 36.901177],
+              [117.950645, 36.902137],
+              [117.960674, 36.910376],
+              [117.96178, 36.922494],
+              [117.949145, 36.918375],
+              [117.94338, 36.930012],
+              [117.935404, 36.915736],
+              [117.936115, 36.93489],
+              [117.931772, 36.941886],
+              [117.913372, 36.953679],
+              [117.910292, 36.962592],
+              [117.911951, 36.975141],
+              [117.906581, 36.981695],
+              [117.870493, 36.985451],
+              [117.866623, 36.993282],
+              [117.866386, 37.007024],
+              [117.870493, 37.013375],
+              [117.865992, 37.023719],
+              [117.841827, 37.026354],
+              [117.840327, 37.035539],
+              [117.847355, 37.065959],
+              [117.800369, 37.070789],
+              [117.771783, 37.069032],
+              [117.761991, 37.065839],
+              [117.739801, 37.064921],
+              [117.726692, 37.068753],
+              [117.703002, 37.068673],
+              [117.673942, 37.073143],
+              [117.644645, 37.083878],
+              [117.619375, 37.090103],
+              [117.608477, 37.090622],
+              [117.590946, 37.084996],
+              [117.575074, 37.089185],
+              [117.567888, 37.11029],
+              [117.576969, 37.114758],
+              [117.574442, 37.12106],
+              [117.557464, 37.124211],
+              [117.551305, 37.146781],
+              [117.574284, 37.151366],
+              [117.586366, 37.160216],
+              [117.592052, 37.169624],
+              [117.598212, 37.203058],
+              [117.615348, 37.212699],
+              [117.627193, 37.228074],
+              [117.63043, 37.247269],
+              [117.644329, 37.265862],
+              [117.659491, 37.274101],
+              [117.675995, 37.270121],
+              [117.693447, 37.257661],
+              [117.729851, 37.249101],
+              [117.760333, 37.244959],
+              [117.773678, 37.244959],
+              [117.782128, 37.248702],
+              [117.818848, 37.276012],
+              [117.83859, 37.282659],
+              [117.850909, 37.28246],
+              [117.8776, 37.273027],
+              [117.888497, 37.262319],
+              [117.909266, 37.265065],
+              [117.941327, 37.280549],
+              [117.948829, 37.26829],
+              [117.947013, 37.262159],
+              [117.963833, 37.271753],
+              [117.990603, 37.262358],
+              [117.990761, 37.248981],
+              [117.996446, 37.246273],
+              [117.981048, 37.238429],
+              [117.973862, 37.216483],
+              [117.98089, 37.218674],
+              [117.984364, 37.210349],
+              [117.994393, 37.212699],
+              [118.010898, 37.20756],
+              [118.019584, 37.210309],
+              [118.022348, 37.2221],
+              [118.036799, 37.220905],
+              [118.046275, 37.216324],
+              [118.048012, 37.205568],
+              [118.064122, 37.21007],
+              [118.074072, 37.204094],
+              [118.077941, 37.188953],
+              [118.082995, 37.185605],
+              [118.071545, 37.177675],
+              [118.074467, 37.170341],
+              [118.062385, 37.162528],
+              [118.059858, 37.151087],
+              [118.065069, 37.139564],
+              [118.079679, 37.120781],
+              [118.068623, 37.115875],
+              [118.057252, 37.106141],
+              [118.045485, 37.105982],
+              [118.045959, 37.098202],
+              [118.056857, 37.093654],
+              [118.063016, 37.082841],
+              [118.086075, 37.091899],
+              [118.111187, 37.094652],
+              [118.115925, 37.100636],
+              [118.130455, 37.091101],
+              [118.136062, 37.077773],
+              [118.13622, 37.06536],
+              [118.156909, 37.065281],
+              [118.15762, 37.057776],
+              [118.150829, 37.054743],
+              [118.15146, 37.047038],
+              [118.139615, 37.044363],
+              [118.139299, 37.033103],
+              [118.134008, 37.025955],
+              [118.139299, 37.014693],
+              [118.138983, 37.005985],
+              [118.153198, 37.000512],
+              [118.15146, 36.988527],
+              [118.161331, 36.988567],
+              [118.160936, 36.981934],
+              [118.192918, 36.977739],
+              [118.195209, 36.967348],
+              [118.209739, 36.963152],
+              [118.222531, 36.967109],
+              [118.231376, 36.974822],
+              [118.235087, 36.98557],
+              [118.247327, 36.98613],
+              [118.250802, 37.002949],
+              [118.262568, 37.00271],
+              [118.271412, 37.006744],
+              [118.288785, 36.999993],
+              [118.28997, 37.00946],
+              [118.308212, 37.019885],
+              [118.310186, 37.028231],
+              [118.3259, 37.035459],
+              [118.324558, 37.046279],
+              [118.337588, 37.053904],
+              [118.338535, 37.072265],
+              [118.332928, 37.081923],
+              [118.338851, 37.093894],
+              [118.338298, 37.10311],
+              [118.349354, 37.101753],
+              [118.338219, 37.123134],
+              [118.346116, 37.123931],
+              [118.340667, 37.131748],
+              [118.347616, 37.139803],
+              [118.356224, 37.139325],
+              [118.361594, 37.148495],
+              [118.366569, 37.146781],
+              [118.377545, 37.154157],
+              [118.380467, 37.175164],
+              [118.387574, 37.177834],
+              [118.383389, 37.190587],
+              [118.376598, 37.196962],
+              [118.375966, 37.206126],
+              [118.3642, 37.210189],
+              [118.346669, 37.233252],
+              [118.350459, 37.243765],
+              [118.36033, 37.244561],
+              [118.368385, 37.258576],
+              [118.375729, 37.258497],
+              [118.372096, 37.273703],
+              [118.36262, 37.273783],
+              [118.368069, 37.279594],
+              [118.358277, 37.280669],
+              [118.355197, 37.286997],
+              [118.342168, 37.287076],
+              [118.342168, 37.295075],
+              [118.325584, 37.296866],
+              [118.326058, 37.306535],
+              [118.319741, 37.305978],
+              [118.31524, 37.31477],
+              [118.315398, 37.352514],
+              [118.287285, 37.352434],
+              [118.291865, 37.358518],
+              [118.286495, 37.362772],
+              [118.273624, 37.360029],
+              [118.262015, 37.364283],
+              [118.258541, 37.37911],
+              [118.245827, 37.376646],
+              [118.245353, 37.367781],
+              [118.222768, 37.367861],
+              [118.217951, 37.371478],
+              [118.216925, 37.385191],
+              [118.202, 37.382409],
+              [118.161015, 37.362573],
+              [118.156198, 37.364322],
+              [118.154935, 37.377401],
+              [118.141668, 37.376487],
+              [118.135509, 37.384834],
+              [118.144037, 37.392822],
+              [118.16141, 37.389961],
+              [118.160147, 37.399618],
+              [118.165596, 37.4082],
+              [118.163937, 37.416742],
+              [118.14996, 37.438351],
+              [118.136141, 37.441688],
+              [118.114898, 37.439742],
+              [118.118531, 37.456182],
+              [118.125322, 37.45912],
+              [118.112766, 37.463528],
+              [118.120426, 37.480757],
+              [118.128481, 37.483694],
+              [118.127849, 37.491831],
+              [118.135035, 37.496752],
+              [118.134245, 37.507387],
+              [118.139378, 37.507427],
+              [118.136772, 37.516791],
+              [118.142537, 37.518933],
+              [118.150987, 37.530517],
+              [118.156988, 37.530358],
+              [118.159831, 37.539164],
+              [118.173255, 37.546858],
+              [118.176098, 37.557129],
+              [118.173176, 37.563593],
+              [118.141431, 37.556297],
+              [118.134166, 37.558478],
+              [118.13922, 37.571364],
+              [118.131324, 37.571285],
+              [118.127612, 37.578103],
+              [118.134877, 37.590035],
+              [118.148696, 37.594078],
+              [118.146722, 37.599943],
+              [118.154935, 37.605491],
+              [118.157462, 37.62035],
+              [118.154935, 37.628036],
+              [118.163542, 37.63069],
+              [118.165596, 37.644633],
+              [118.172545, 37.644079],
+              [118.177125, 37.657623],
+              [118.195445, 37.661742],
+              [118.200657, 37.667404],
+              [118.207449, 37.661583],
+              [118.22569, 37.663682],
+              [118.239431, 37.65596],
+              [118.246459, 37.658376],
+              [118.260989, 37.654614],
+              [118.2846, 37.662058],
+              [118.293129, 37.670096],
+              [118.294076, 37.678529],
+              [118.305132, 37.683122],
+              [118.3045, 37.690722],
+              [118.316187, 37.714151],
+              [118.319425, 37.712924],
+              [118.31753, 37.728395],
+              [118.337509, 37.729502],
+              [118.341931, 37.74667],
+              [118.353697, 37.750151],
+              [118.353065, 37.75814],
+              [118.340667, 37.763913],
+              [118.340588, 37.774391],
+              [118.348406, 37.790719],
+              [118.36191, 37.792063],
+              [118.352355, 37.814274],
+              [118.356382, 37.820834],
+              [118.344932, 37.824627],
+              [118.346116, 37.832371],
+              [118.334271, 37.832134],
+              [118.340193, 37.838059],
+              [118.328111, 37.865272],
+              [118.313265, 37.861521],
+              [118.301657, 37.870208],
+              [118.286337, 37.8569],
+              [118.269754, 37.853109],
+              [118.258304, 37.844182],
+              [118.258146, 37.854886],
+              [118.247643, 37.871788],
+              [118.248749, 37.858164],
+              [118.239115, 37.868708],
+              [118.236588, 37.884501],
+              [118.243142, 37.895673],
+              [118.235403, 37.905343],
+              [118.232718, 37.922509],
+              [118.225611, 37.923417],
+              [118.226954, 37.939672],
+              [118.224742, 37.950559],
+              [118.215503, 37.949376],
+              [118.213529, 37.95541],
+              [118.223479, 37.959788],
+              [118.220873, 37.98258],
+              [118.22956, 37.986444],
+              [118.2234, 38.00095],
+              [118.227585, 38.037874],
+              [118.230665, 38.056743],
+              [118.226638, 38.079583],
+              [118.235324, 38.082969],
+              [118.245511, 38.103322],
+              [118.241247, 38.112138],
+              [118.227664, 38.119262],
+              [118.236272, 38.125754],
+              [118.245432, 38.144286],
+              [118.216846, 38.146921],
+              [118.177915, 38.186406],
+              [118.112134, 38.210227],
+              [118.04517, 38.214001],
+              [118.033009, 38.205904],
+              [118.018794, 38.202641],
+              [117.997631, 38.211918],
+              [117.935404, 38.255098],
+              [117.89671, 38.279605],
+              [117.893393, 38.287968],
+              [117.895683, 38.301629],
+              [117.860859, 38.274578],
+              [117.847513, 38.25392],
+              [117.823586, 38.235652],
+              [117.808582, 38.228383],
+              [117.805897, 38.217734],
+              [117.797842, 38.207712],
+              [117.796105, 38.1936],
+              [117.789235, 38.180744],
+              [117.801317, 38.175239],
+              [117.79421, 38.167846],
+              [117.771704, 38.166076],
+              [117.766966, 38.158682],
+              [117.772099, 38.138817],
+              [117.768782, 38.131893],
+              [117.743197, 38.123393],
+              [117.730641, 38.108321],
+              [117.729219, 38.093796],
+              [117.704502, 38.07604],
+              [117.679469, 38.079544],
+              [117.666045, 38.072535],
+              [117.644961, 38.072377],
+              [117.616769, 38.06903],
+              [117.605082, 38.073008],
+              [117.58376, 38.070645],
+              [117.57618, 38.065132],
+              [117.564887, 38.063674],
+              [117.556517, 38.057215],
+              [117.560386, 38.040987],
+              [117.545935, 38.026842],
+              [117.541039, 38.011237],
+              [117.54933, 38.010252],
+              [117.563545, 37.998585],
+              [117.570652, 37.957264],
+              [117.567809, 37.946772],
+              [117.529036, 37.932295],
+              [117.539302, 37.913552],
+              [117.542776, 37.890146],
+              [117.547198, 37.883198],
+              [117.568835, 37.882409],
+              [117.580602, 37.875302],
+              [117.581076, 37.858993],
+              [117.595685, 37.853504],
+              [117.606582, 37.845209],
+              [117.605003, 37.838968],
+              [117.59529, 37.834741],
+              [117.588025, 37.82273],
+              [117.56623, 37.812733],
+              [117.568599, 37.804987],
+              [117.559912, 37.800008],
+              [117.546567, 37.776368],
+              [117.547356, 37.767512],
+              [117.526509, 37.762964],
+              [117.522165, 37.755371],
+              [117.531563, 37.748213],
+              [117.544119, 37.747699],
+              [117.547198, 37.737494],
+              [117.542618, 37.726258],
+              [117.556201, 37.716683],
+              [117.539775, 37.713993],
+              [117.543092, 37.703625],
+              [117.531247, 37.688901],
+              [117.506451, 37.686803],
+              [117.50345, 37.680548],
+              [117.488604, 37.677025],
+              [117.477075, 37.654416],
+              [117.465625, 37.655564],
+              [117.451963, 37.669978],
+              [117.444224, 37.671918],
+              [117.428825, 37.665741],
+              [117.415401, 37.669582],
+              [117.407188, 37.678846],
+              [117.392974, 37.660039],
+              [117.373074, 37.648594],
+              [117.363835, 37.649624],
+              [117.357596, 37.658495],
+              [117.358149, 37.672947],
+              [117.363598, 37.679559],
+              [117.36573, 37.698361],
+              [117.352543, 37.707345],
+              [117.344567, 37.693136],
+              [117.347489, 37.683319],
+              [117.329405, 37.673343],
+              [117.318428, 37.662019],
+              [117.312506, 37.64194],
+              [117.304925, 37.640514],
+              [117.312585, 37.633701],
+              [117.317797, 37.615081],
+              [117.314875, 37.600458],
+              [117.308321, 37.589956],
+              [117.288973, 37.577112],
+              [117.280682, 37.56621],
+              [117.277681, 37.545391],
+              [117.273417, 37.532619]
+            ]
+          ],
+          [
+            [
+              [118.40779, 38.026212],
+              [118.419951, 38.025503],
+              [118.419319, 38.053119],
+              [118.410001, 38.053277],
+              [118.40779, 38.026212]
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "adcode": 371700,
+        "name": "菏泽市",
+        "center": [115.469381, 35.246531],
+        "centroid": [115.698213, 35.152257],
+        "childrenNum": 9,
+        "level": "city",
+        "parent": { "adcode": 370000 },
+        "subFeatureIndex": 15,
+        "acroutes": [100000, 370000]
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [115.876002, 35.867124],
+              [115.871422, 35.858327],
+              [115.872606, 35.872799],
+              [115.865499, 35.868624],
+              [115.859971, 35.857882],
+              [115.840861, 35.857192],
+              [115.841335, 35.850016],
+              [115.821356, 35.852652],
+              [115.816776, 35.844259],
+              [115.773343, 35.854192],
+              [115.763709, 35.838379],
+              [115.752891, 35.838379],
+              [115.753128, 35.832945],
+              [115.734886, 35.832945],
+              [115.727937, 35.815627],
+              [115.720277, 35.817087],
+              [115.717434, 35.802727],
+              [115.706379, 35.805608],
+              [115.704404, 35.788933],
+              [115.696271, 35.788892],
+              [115.698245, 35.768399],
+              [115.693586, 35.754071],
+              [115.665079, 35.751067],
+              [115.643046, 35.743841],
+              [115.619514, 35.739212],
+              [115.588875, 35.738522],
+              [115.583031, 35.730564],
+              [115.562499, 35.738644],
+              [115.552786, 35.73032],
+              [115.533202, 35.734137],
+              [115.524121, 35.726341],
+              [115.511486, 35.727153],
+              [115.485979, 35.710137],
+              [115.461499, 35.680847],
+              [115.452418, 35.660732],
+              [115.439388, 35.643458],
+              [115.416251, 35.623985],
+              [115.411908, 35.603571],
+              [115.394456, 35.586894],
+              [115.389718, 35.577334],
+              [115.383716, 35.57766],
+              [115.383242, 35.568912],
+              [115.370765, 35.571028],
+              [115.369502, 35.559757],
+              [115.359236, 35.565454],
+              [115.357973, 35.554711],
+              [115.345101, 35.553612],
+              [115.345969, 35.546979],
+              [115.360499, 35.543275],
+              [115.35355, 35.540548],
+              [115.350313, 35.529476],
+              [115.357973, 35.506555],
+              [115.355761, 35.490143],
+              [115.339099, 35.490673],
+              [115.307117, 35.480001],
+              [115.286665, 35.464481],
+              [115.270792, 35.456821],
+              [115.272608, 35.448305],
+              [115.257446, 35.43559],
+              [115.23731, 35.423118],
+              [115.209829, 35.423118],
+              [115.197905, 35.420673],
+              [115.189534, 35.425116],
+              [115.16766, 35.426094],
+              [115.136863, 35.421529],
+              [115.126439, 35.418023],
+              [115.126597, 35.408728],
+              [115.117831, 35.400125],
+              [115.117989, 35.41839],
+              [115.114831, 35.404121],
+              [115.105907, 35.403958],
+              [115.091614, 35.416066],
+              [115.084823, 35.410074],
+              [115.088613, 35.39299],
+              [115.075426, 35.375168],
+              [115.057737, 35.378472],
+              [115.043286, 35.376963],
+              [115.035152, 35.368316],
+              [115.02536, 35.346328],
+              [115.0177, 35.340575],
+              [115.014541, 35.318089],
+              [115.004749, 35.317273],
+              [114.987613, 35.30221],
+              [114.963607, 35.273752],
+              [114.975768, 35.270281],
+              [114.975531, 35.261541],
+              [114.957684, 35.261132],
+              [114.954605, 35.255455],
+              [114.92973, 35.248225],
+              [114.932494, 35.198659],
+              [114.928308, 35.194776],
+              [114.909356, 35.19449],
+              [114.876584, 35.189012],
+              [114.86166, 35.182389],
+              [114.850288, 35.172617],
+              [114.841049, 35.159246],
+              [114.841681, 35.151189],
+              [114.860633, 35.137405],
+              [114.872557, 35.125992],
+              [114.883613, 35.109667],
+              [114.882902, 35.098781],
+              [114.876269, 35.091128],
+              [114.861186, 35.082983],
+              [114.83181, 35.074182],
+              [114.819254, 35.051786],
+              [114.834021, 35.042162],
+              [114.85092, 35.041917],
+              [114.855263, 35.036183],
+              [114.846972, 35.023444],
+              [114.827072, 35.01013],
+              [114.859291, 35.002674],
+              [114.869951, 35.024468],
+              [114.884402, 35.021929],
+              [114.880296, 35.003493],
+              [114.889693, 34.993987],
+              [114.907935, 34.989356],
+              [114.913936, 34.977881],
+              [114.923807, 34.968741],
+              [114.934784, 34.980709],
+              [114.946787, 34.988701],
+              [114.970319, 34.990504],
+              [115.008066, 34.988496],
+              [115.016042, 34.977348],
+              [115.028835, 34.971815],
+              [115.0376, 34.981611],
+              [115.051656, 34.985996],
+              [115.074952, 35.000379],
+              [115.106144, 35.000789],
+              [115.128097, 35.004354],
+              [115.132993, 34.999683],
+              [115.131177, 34.983578],
+              [115.146576, 34.980135],
+              [115.157236, 34.966978],
+              [115.15692, 34.958001],
+              [115.175004, 34.962469],
+              [115.201616, 34.95099],
+              [115.208249, 34.958329],
+              [115.219147, 34.960624],
+              [115.222148, 34.945578],
+              [115.211724, 34.943364],
+              [115.202722, 34.925608],
+              [115.204933, 34.914247],
+              [115.239363, 34.911868],
+              [115.252156, 34.906576],
+              [115.249234, 34.894515],
+              [115.240784, 34.883847],
+              [115.239363, 34.874655],
+              [115.243469, 34.850152],
+              [115.256104, 34.845308],
+              [115.274661, 34.85475],
+              [115.289586, 34.851589],
+              [115.302379, 34.858813],
+              [115.317146, 34.859183],
+              [115.329623, 34.851466],
+              [115.345969, 34.846212],
+              [115.356946, 34.837303],
+              [115.379215, 34.828763],
+              [115.393982, 34.831801],
+              [115.408512, 34.82593],
+              [115.416172, 34.813323],
+              [115.413882, 34.80782],
+              [115.426754, 34.805396],
+              [115.43465, 34.790322],
+              [115.436546, 34.776805],
+              [115.449259, 34.7443],
+              [115.437256, 34.734312],
+              [115.433861, 34.725103],
+              [115.444916, 34.710302],
+              [115.447048, 34.698623],
+              [115.444758, 34.674479],
+              [115.458183, 34.656171],
+              [115.46142, 34.637283],
+              [115.47903, 34.625882],
+              [115.491586, 34.607028],
+              [115.515592, 34.582611],
+              [115.535176, 34.573303],
+              [115.55476, 34.56906],
+              [115.561157, 34.572232],
+              [115.576792, 34.570667],
+              [115.593771, 34.573179],
+              [115.610354, 34.572067],
+              [115.621883, 34.574744],
+              [115.639493, 34.571532],
+              [115.643599, 34.567701],
+              [115.669422, 34.55695],
+              [115.684426, 34.555591],
+              [115.697297, 34.569019],
+              [115.699114, 34.598876],
+              [115.711433, 34.59867],
+              [115.718224, 34.591094],
+              [115.762051, 34.587717],
+              [115.795928, 34.578492],
+              [115.802404, 34.572479],
+              [115.827436, 34.558268],
+              [115.838808, 34.560575],
+              [115.838097, 34.567784],
+              [115.849705, 34.565601],
+              [115.858313, 34.569967],
+              [115.946204, 34.581622],
+              [115.969973, 34.582611],
+              [115.98403, 34.589282],
+              [115.98474, 34.607234],
+              [115.991374, 34.615344],
+              [116.001561, 34.619049],
+              [116.010168, 34.615838],
+              [116.023908, 34.601964],
+              [116.03757, 34.593029],
+              [116.055101, 34.595417],
+              [116.082661, 34.608305],
+              [116.101297, 34.605793],
+              [116.11788, 34.589776],
+              [116.124829, 34.572314],
+              [116.134542, 34.55971],
+              [116.146861, 34.553201],
+              [116.156653, 34.553737],
+              [116.190136, 34.570502],
+              [116.199059, 34.577463],
+              [116.216906, 34.575115],
+              [116.23341, 34.555137],
+              [116.247703, 34.551759],
+              [116.252915, 34.565724],
+              [116.259154, 34.567619],
+              [116.266024, 34.583764],
+              [116.274868, 34.584629],
+              [116.278659, 34.602129],
+              [116.286082, 34.608799],
+              [116.301086, 34.607769],
+              [116.310878, 34.601429],
+              [116.324934, 34.6011],
+              [116.334015, 34.620902],
+              [116.350914, 34.621148],
+              [116.372157, 34.633455],
+              [116.37421, 34.639958],
+              [116.364418, 34.651851],
+              [116.378237, 34.66802],
+              [116.378079, 34.684146],
+              [116.385186, 34.686696],
+              [116.385502, 34.694716],
+              [116.392688, 34.703887],
+              [116.39182, 34.710343],
+              [116.377053, 34.718155],
+              [116.363786, 34.715195],
+              [116.368445, 34.725309],
+              [116.365681, 34.742779],
+              [116.371525, 34.750136],
+              [116.403191, 34.756301],
+              [116.40635, 34.82014],
+              [116.409745, 34.852944],
+              [116.373815, 34.86538],
+              [116.363865, 34.861112],
+              [116.3352, 34.862343],
+              [116.335042, 34.868048],
+              [116.325803, 34.874943],
+              [116.299032, 34.877733],
+              [116.286713, 34.88159],
+              [116.266261, 34.89751],
+              [116.226935, 34.911786],
+              [116.213826, 34.913098],
+              [116.201586, 34.919702],
+              [116.192505, 34.939182],
+              [116.162181, 34.94361],
+              [116.155153, 34.947259],
+              [116.162023, 34.957632],
+              [116.171499, 34.964683],
+              [116.170789, 34.974684],
+              [116.139754, 34.995421],
+              [116.115748, 35.025574],
+              [116.114564, 35.039828],
+              [116.119381, 35.053383],
+              [116.141413, 35.055062],
+              [116.140228, 35.06018],
+              [116.15389, 35.088467],
+              [116.141018, 35.09076],
+              [116.154284, 35.113513],
+              [116.181765, 35.11204],
+              [116.204903, 35.145668],
+              [116.214537, 35.155606],
+              [116.223618, 35.173231],
+              [116.221881, 35.181817],
+              [116.213115, 35.196697],
+              [116.228356, 35.194367],
+              [116.234516, 35.200008],
+              [116.234437, 35.208264],
+              [116.248256, 35.195634],
+              [116.269104, 35.191178],
+              [116.284265, 35.22506],
+              [116.285608, 35.242669],
+              [116.269656, 35.269872],
+              [116.265866, 35.271547],
+              [116.237201, 35.261745],
+              [116.223539, 35.260438],
+              [116.215642, 35.29131],
+              [116.199612, 35.304986],
+              [116.193452, 35.337555],
+              [116.201744, 35.345185],
+              [116.215169, 35.350734],
+              [116.22117, 35.358608],
+              [116.223855, 35.371702],
+              [116.215879, 35.393438],
+              [116.212642, 35.409054],
+              [116.215958, 35.419857],
+              [116.215484, 35.435957],
+              [116.204429, 35.436079],
+              [116.20206, 35.458247],
+              [116.206798, 35.465703],
+              [116.19669, 35.46334],
+              [116.188319, 35.467781],
+              [116.188319, 35.477313],
+              [116.177817, 35.466151],
+              [116.178685, 35.450342],
+              [116.167946, 35.452217],
+              [116.15689, 35.446838],
+              [116.160918, 35.471569],
+              [116.15002, 35.469573],
+              [116.129567, 35.475235],
+              [116.128778, 35.489614],
+              [116.121276, 35.497881],
+              [116.12554, 35.516042],
+              [116.123408, 35.540589],
+              [116.115274, 35.566471],
+              [116.114327, 35.577456],
+              [116.125145, 35.587871],
+              [116.125145, 35.59385],
+              [116.116222, 35.606621],
+              [116.115906, 35.618414],
+              [116.134384, 35.638539],
+              [116.127514, 35.649433],
+              [116.121829, 35.67459],
+              [116.103034, 35.687348],
+              [116.089847, 35.699373],
+              [116.079897, 35.712452],
+              [116.071052, 35.719072],
+              [116.041518, 35.733893],
+              [116.026909, 35.749687],
+              [116.017591, 35.756263],
+              [115.970289, 35.782156],
+              [115.945493, 35.791976],
+              [115.922119, 35.799157],
+              [115.925988, 35.804756],
+              [115.911932, 35.811733],
+              [115.898192, 35.805202],
+              [115.883583, 35.808163],
+              [115.877107, 35.820657],
+              [115.875212, 35.835095],
+              [115.876002, 35.867124]
+            ]
+          ]
+        ]
+      }
+    }
+  ]
+}
diff --git a/src/assets/tan/1111 1.png b/src/assets/tan/1111 1.png
new file mode 100644
index 0000000..c637058
Binary files /dev/null and b/src/assets/tan/1111 1.png differ
diff --git a/src/assets/tan/1111 1@2x.png b/src/assets/tan/1111 1@2x.png
new file mode 100644
index 0000000..e2cb7d5
Binary files /dev/null and b/src/assets/tan/1111 1@2x.png differ
diff --git a/src/assets/tan/325数值上升 (2).png b/src/assets/tan/325数值上升 (2).png
new file mode 100644
index 0000000..6b45cbc
Binary files /dev/null and b/src/assets/tan/325数值上升 (2).png differ
diff --git a/src/assets/tan/325数值上升 (2)@2x.png b/src/assets/tan/325数值上升 (2)@2x.png
new file mode 100644
index 0000000..54edbd9
Binary files /dev/null and b/src/assets/tan/325数值上升 (2)@2x.png differ
diff --git a/src/assets/tan/325数值上升.png b/src/assets/tan/325数值上升.png
new file mode 100644
index 0000000..368628a
Binary files /dev/null and b/src/assets/tan/325数值上升.png differ
diff --git a/src/assets/tan/325数值上升@2x.png b/src/assets/tan/325数值上升@2x.png
new file mode 100644
index 0000000..64378be
Binary files /dev/null and b/src/assets/tan/325数值上升@2x.png differ
diff --git a/src/assets/tan/Vector.png b/src/assets/tan/Vector.png
new file mode 100644
index 0000000..00066a9
Binary files /dev/null and b/src/assets/tan/Vector.png differ
diff --git a/src/assets/tan/Vector@2x.png b/src/assets/tan/Vector@2x.png
new file mode 100644
index 0000000..7d01ba5
Binary files /dev/null and b/src/assets/tan/Vector@2x.png differ
diff --git a/src/assets/tan/分组 7.png b/src/assets/tan/分组 7.png
new file mode 100644
index 0000000..04b821d
Binary files /dev/null and b/src/assets/tan/分组 7.png differ
diff --git a/src/assets/tan/分组 7@2x.png b/src/assets/tan/分组 7@2x.png
new file mode 100644
index 0000000..11c5a46
Binary files /dev/null and b/src/assets/tan/分组 7@2x.png differ
diff --git a/src/assets/tan/反白稿.png b/src/assets/tan/反白稿.png
new file mode 100644
index 0000000..4209473
Binary files /dev/null and b/src/assets/tan/反白稿.png differ
diff --git a/src/assets/tan/反白稿@2x.png b/src/assets/tan/反白稿@2x.png
new file mode 100644
index 0000000..b3a9527
Binary files /dev/null and b/src/assets/tan/反白稿@2x.png differ
diff --git a/src/assets/tan/图层 3.png b/src/assets/tan/图层 3.png
new file mode 100644
index 0000000..05121f1
Binary files /dev/null and b/src/assets/tan/图层 3.png differ
diff --git a/src/assets/tan/图层 3@2x.png b/src/assets/tan/图层 3@2x.png
new file mode 100644
index 0000000..17d97e6
Binary files /dev/null and b/src/assets/tan/图层 3@2x.png differ
diff --git a/src/assets/tan/组 3126.png b/src/assets/tan/组 3126.png
new file mode 100644
index 0000000..e9856ef
Binary files /dev/null and b/src/assets/tan/组 3126.png differ
diff --git a/src/assets/tan/组 3126@2x.png b/src/assets/tan/组 3126@2x.png
new file mode 100644
index 0000000..95934fc
Binary files /dev/null and b/src/assets/tan/组 3126@2x.png differ
diff --git a/src/assets/tan/组 3127.png b/src/assets/tan/组 3127.png
new file mode 100644
index 0000000..14fe7bb
Binary files /dev/null and b/src/assets/tan/组 3127.png differ
diff --git a/src/assets/tan/组 3127@2x.png b/src/assets/tan/组 3127@2x.png
new file mode 100644
index 0000000..b58f248
Binary files /dev/null and b/src/assets/tan/组 3127@2x.png differ
diff --git a/src/assets/tan/组 3128.png b/src/assets/tan/组 3128.png
new file mode 100644
index 0000000..31cfc99
Binary files /dev/null and b/src/assets/tan/组 3128.png differ
diff --git a/src/assets/tan/组 3128@2x.png b/src/assets/tan/组 3128@2x.png
new file mode 100644
index 0000000..b58f248
Binary files /dev/null and b/src/assets/tan/组 3128@2x.png differ
diff --git a/src/assets/tan/组 3129.png b/src/assets/tan/组 3129.png
new file mode 100644
index 0000000..160c93c
Binary files /dev/null and b/src/assets/tan/组 3129.png differ
diff --git a/src/assets/tan/组 3129@2x.png b/src/assets/tan/组 3129@2x.png
new file mode 100644
index 0000000..1e8789f
Binary files /dev/null and b/src/assets/tan/组 3129@2x.png differ
diff --git a/src/assets/tan/组 3130.png b/src/assets/tan/组 3130.png
new file mode 100644
index 0000000..14a8678
Binary files /dev/null and b/src/assets/tan/组 3130.png differ
diff --git a/src/assets/tan/组 3130@2x.png b/src/assets/tan/组 3130@2x.png
new file mode 100644
index 0000000..f539413
Binary files /dev/null and b/src/assets/tan/组 3130@2x.png differ
diff --git a/src/assets/tan/组 3131.png b/src/assets/tan/组 3131.png
new file mode 100644
index 0000000..8fa586d
Binary files /dev/null and b/src/assets/tan/组 3131.png differ
diff --git a/src/assets/tan/组 3131@2x.png b/src/assets/tan/组 3131@2x.png
new file mode 100644
index 0000000..3e57e0b
Binary files /dev/null and b/src/assets/tan/组 3131@2x.png differ
diff --git a/src/assets/tan/组 3132.png b/src/assets/tan/组 3132.png
new file mode 100644
index 0000000..291f299
Binary files /dev/null and b/src/assets/tan/组 3132.png differ
diff --git a/src/assets/tan/组 3132@2x.png b/src/assets/tan/组 3132@2x.png
new file mode 100644
index 0000000..6fbb8dd
Binary files /dev/null and b/src/assets/tan/组 3132@2x.png differ
diff --git a/src/assets/tan/组 3133.png b/src/assets/tan/组 3133.png
new file mode 100644
index 0000000..a3bc688
Binary files /dev/null and b/src/assets/tan/组 3133.png differ
diff --git a/src/assets/tan/组 3133@2x.png b/src/assets/tan/组 3133@2x.png
new file mode 100644
index 0000000..9fc4565
Binary files /dev/null and b/src/assets/tan/组 3133@2x.png differ
diff --git a/src/assets/tan/组 3134.png b/src/assets/tan/组 3134.png
new file mode 100644
index 0000000..e8c7b72
Binary files /dev/null and b/src/assets/tan/组 3134.png differ
diff --git a/src/assets/tan/组 3134@2x.png b/src/assets/tan/组 3134@2x.png
new file mode 100644
index 0000000..63b3c3b
Binary files /dev/null and b/src/assets/tan/组 3134@2x.png differ
diff --git a/src/assets/tan/组 3135.png b/src/assets/tan/组 3135.png
new file mode 100644
index 0000000..196b3bd
Binary files /dev/null and b/src/assets/tan/组 3135.png differ
diff --git a/src/assets/tan/组 3135@2x.png b/src/assets/tan/组 3135@2x.png
new file mode 100644
index 0000000..60d17a6
Binary files /dev/null and b/src/assets/tan/组 3135@2x.png differ
diff --git a/src/assets/tan/组 3136.png b/src/assets/tan/组 3136.png
new file mode 100644
index 0000000..521ee72
Binary files /dev/null and b/src/assets/tan/组 3136.png differ
diff --git a/src/assets/tan/组 3136@2x.png b/src/assets/tan/组 3136@2x.png
new file mode 100644
index 0000000..a36e3af
Binary files /dev/null and b/src/assets/tan/组 3136@2x.png differ
diff --git a/src/assets/tan/组 3137.png b/src/assets/tan/组 3137.png
new file mode 100644
index 0000000..975b85b
Binary files /dev/null and b/src/assets/tan/组 3137.png differ
diff --git a/src/assets/tan/组 3137@2x.png b/src/assets/tan/组 3137@2x.png
new file mode 100644
index 0000000..d1dba5b
Binary files /dev/null and b/src/assets/tan/组 3137@2x.png differ
diff --git a/src/assets/tan/组 3138.png b/src/assets/tan/组 3138.png
new file mode 100644
index 0000000..453ccfa
Binary files /dev/null and b/src/assets/tan/组 3138.png differ
diff --git a/src/assets/tan/组 3138@2x.png b/src/assets/tan/组 3138@2x.png
new file mode 100644
index 0000000..0c17323
Binary files /dev/null and b/src/assets/tan/组 3138@2x.png differ
diff --git a/src/assets/tan/组 3139.png b/src/assets/tan/组 3139.png
new file mode 100644
index 0000000..f71ece4
Binary files /dev/null and b/src/assets/tan/组 3139.png differ
diff --git a/src/assets/tan/组 3139@2x.png b/src/assets/tan/组 3139@2x.png
new file mode 100644
index 0000000..dc55d2f
Binary files /dev/null and b/src/assets/tan/组 3139@2x.png differ
diff --git a/src/assets/tan/组 3141.png b/src/assets/tan/组 3141.png
new file mode 100644
index 0000000..583107a
Binary files /dev/null and b/src/assets/tan/组 3141.png differ
diff --git a/src/assets/tan/组 3141@2x.png b/src/assets/tan/组 3141@2x.png
new file mode 100644
index 0000000..87b1264
Binary files /dev/null and b/src/assets/tan/组 3141@2x.png differ
diff --git a/src/assets/tan/组 3142.png b/src/assets/tan/组 3142.png
new file mode 100644
index 0000000..4116775
Binary files /dev/null and b/src/assets/tan/组 3142.png differ
diff --git a/src/assets/tan/组 3142@2x.png b/src/assets/tan/组 3142@2x.png
new file mode 100644
index 0000000..b45b83d
Binary files /dev/null and b/src/assets/tan/组 3142@2x.png differ
diff --git a/src/assets/tan/组 3143.png b/src/assets/tan/组 3143.png
new file mode 100644
index 0000000..ba9e3a6
Binary files /dev/null and b/src/assets/tan/组 3143.png differ
diff --git a/src/assets/tan/组 3143@2x.png b/src/assets/tan/组 3143@2x.png
new file mode 100644
index 0000000..d1d0a75
Binary files /dev/null and b/src/assets/tan/组 3143@2x.png differ
diff --git a/src/assets/zhsdy/10.png b/src/assets/zhsdy/10.png
new file mode 100644
index 0000000..1d114c5
Binary files /dev/null and b/src/assets/zhsdy/10.png differ
diff --git a/src/assets/zhsdy/10@2x.png b/src/assets/zhsdy/10@2x.png
new file mode 100644
index 0000000..03ae165
Binary files /dev/null and b/src/assets/zhsdy/10@2x.png differ
diff --git a/src/assets/zhsdy/1111.png b/src/assets/zhsdy/1111.png
new file mode 100644
index 0000000..9707617
Binary files /dev/null and b/src/assets/zhsdy/1111.png differ
diff --git a/src/assets/zhsdy/1111@2x.png b/src/assets/zhsdy/1111@2x.png
new file mode 100644
index 0000000..861df3c
Binary files /dev/null and b/src/assets/zhsdy/1111@2x.png differ
diff --git a/src/assets/zhsdy/325数值上升 (3).png b/src/assets/zhsdy/325数值上升 (3).png
new file mode 100644
index 0000000..9193fbb
Binary files /dev/null and b/src/assets/zhsdy/325数值上升 (3).png differ
diff --git a/src/assets/zhsdy/325数值上升 (3)@2x(1).png b/src/assets/zhsdy/325数值上升 (3)@2x(1).png
new file mode 100644
index 0000000..ecbc80e
Binary files /dev/null and b/src/assets/zhsdy/325数值上升 (3)@2x(1).png differ
diff --git a/src/assets/zhsdy/325数值上升 (3)@2x.png b/src/assets/zhsdy/325数值上升 (3)@2x.png
new file mode 100644
index 0000000..ecbc80e
Binary files /dev/null and b/src/assets/zhsdy/325数值上升 (3)@2x.png differ
diff --git a/src/assets/zhsdy/325数值上升 (4).png b/src/assets/zhsdy/325数值上升 (4).png
new file mode 100644
index 0000000..6802fc7
Binary files /dev/null and b/src/assets/zhsdy/325数值上升 (4).png differ
diff --git a/src/assets/zhsdy/325数值上升(1).png b/src/assets/zhsdy/325数值上升(1).png
new file mode 100644
index 0000000..c30e62a
Binary files /dev/null and b/src/assets/zhsdy/325数值上升(1).png differ
diff --git a/src/assets/zhsdy/325数值上升(2).png b/src/assets/zhsdy/325数值上升(2).png
new file mode 100644
index 0000000..c30e62a
Binary files /dev/null and b/src/assets/zhsdy/325数值上升(2).png differ
diff --git a/src/assets/zhsdy/325数值上升(3).png b/src/assets/zhsdy/325数值上升(3).png
new file mode 100644
index 0000000..c30e62a
Binary files /dev/null and b/src/assets/zhsdy/325数值上升(3).png differ
diff --git a/src/assets/zhsdy/325数值上升.png b/src/assets/zhsdy/325数值上升.png
new file mode 100644
index 0000000..bce4ef7
Binary files /dev/null and b/src/assets/zhsdy/325数值上升.png differ
diff --git a/src/assets/zhsdy/325数值上升@2x(1).png b/src/assets/zhsdy/325数值上升@2x(1).png
new file mode 100644
index 0000000..74bc38a
Binary files /dev/null and b/src/assets/zhsdy/325数值上升@2x(1).png differ
diff --git a/src/assets/zhsdy/325数值上升@2x(2).png b/src/assets/zhsdy/325数值上升@2x(2).png
new file mode 100644
index 0000000..74bc38a
Binary files /dev/null and b/src/assets/zhsdy/325数值上升@2x(2).png differ
diff --git a/src/assets/zhsdy/325数值上升@2x(3).png b/src/assets/zhsdy/325数值上升@2x(3).png
new file mode 100644
index 0000000..74bc38a
Binary files /dev/null and b/src/assets/zhsdy/325数值上升@2x(3).png differ
diff --git a/src/assets/zhsdy/325数值上升@2x.png b/src/assets/zhsdy/325数值上升@2x.png
new file mode 100644
index 0000000..74bc38a
Binary files /dev/null and b/src/assets/zhsdy/325数值上升@2x.png differ
diff --git a/src/assets/zhsdy/反白稿.png b/src/assets/zhsdy/反白稿.png
new file mode 100644
index 0000000..91d7e10
Binary files /dev/null and b/src/assets/zhsdy/反白稿.png differ
diff --git a/src/assets/zhsdy/反白稿@2x.png b/src/assets/zhsdy/反白稿@2x.png
new file mode 100644
index 0000000..6f38834
Binary files /dev/null and b/src/assets/zhsdy/反白稿@2x.png differ
diff --git a/src/assets/zhsdy/图层 2.png b/src/assets/zhsdy/图层 2.png
new file mode 100644
index 0000000..05121f1
Binary files /dev/null and b/src/assets/zhsdy/图层 2.png differ
diff --git a/src/assets/zhsdy/图层 2@2x.png b/src/assets/zhsdy/图层 2@2x.png
new file mode 100644
index 0000000..17d97e6
Binary files /dev/null and b/src/assets/zhsdy/图层 2@2x.png differ
diff --git a/src/assets/zhsdy/实时负荷走势-框.png b/src/assets/zhsdy/实时负荷走势-框.png
new file mode 100644
index 0000000..00cf730
Binary files /dev/null and b/src/assets/zhsdy/实时负荷走势-框.png differ
diff --git a/src/assets/zhsdy/实时负荷走势-框@2x.png b/src/assets/zhsdy/实时负荷走势-框@2x.png
new file mode 100644
index 0000000..7b18e68
Binary files /dev/null and b/src/assets/zhsdy/实时负荷走势-框@2x.png differ
diff --git a/src/assets/zhsdy/标题背景.png b/src/assets/zhsdy/标题背景.png
new file mode 100644
index 0000000..a7906e4
Binary files /dev/null and b/src/assets/zhsdy/标题背景.png differ
diff --git a/src/assets/zhsdy/标题背景@2x.png b/src/assets/zhsdy/标题背景@2x.png
new file mode 100644
index 0000000..c086f9c
Binary files /dev/null and b/src/assets/zhsdy/标题背景@2x.png differ
diff --git a/src/assets/zhsdy/用能量-框.png b/src/assets/zhsdy/用能量-框.png
new file mode 100644
index 0000000..c6e6ef4
Binary files /dev/null and b/src/assets/zhsdy/用能量-框.png differ
diff --git a/src/assets/zhsdy/用能量-框@2x.png b/src/assets/zhsdy/用能量-框@2x.png
new file mode 100644
index 0000000..4256718
Binary files /dev/null and b/src/assets/zhsdy/用能量-框@2x.png differ
diff --git a/src/assets/zhsdy/组 3117.png b/src/assets/zhsdy/组 3117.png
new file mode 100644
index 0000000..f0a9111
Binary files /dev/null and b/src/assets/zhsdy/组 3117.png differ
diff --git a/src/assets/zhsdy/组 3117@2x.png b/src/assets/zhsdy/组 3117@2x.png
new file mode 100644
index 0000000..4cdf2ba
Binary files /dev/null and b/src/assets/zhsdy/组 3117@2x.png differ
diff --git a/src/assets/zhsdy/组 3118.png b/src/assets/zhsdy/组 3118.png
new file mode 100644
index 0000000..37f9a31
Binary files /dev/null and b/src/assets/zhsdy/组 3118.png differ
diff --git a/src/assets/zhsdy/组 3118@2x.png b/src/assets/zhsdy/组 3118@2x.png
new file mode 100644
index 0000000..33e7b35
Binary files /dev/null and b/src/assets/zhsdy/组 3118@2x.png differ
diff --git a/src/assets/zhsdy/组 3119.png b/src/assets/zhsdy/组 3119.png
new file mode 100644
index 0000000..14f9990
Binary files /dev/null and b/src/assets/zhsdy/组 3119.png differ
diff --git a/src/assets/zhsdy/组 3119@2x.png b/src/assets/zhsdy/组 3119@2x.png
new file mode 100644
index 0000000..095917e
Binary files /dev/null and b/src/assets/zhsdy/组 3119@2x.png differ
diff --git a/src/assets/zhsdy/组 3120.png b/src/assets/zhsdy/组 3120.png
new file mode 100644
index 0000000..5544157
Binary files /dev/null and b/src/assets/zhsdy/组 3120.png differ
diff --git a/src/assets/zhsdy/组 3120@2x.png b/src/assets/zhsdy/组 3120@2x.png
new file mode 100644
index 0000000..1bfeffe
Binary files /dev/null and b/src/assets/zhsdy/组 3120@2x.png differ
diff --git a/src/assets/zhsdy/组 3144.png b/src/assets/zhsdy/组 3144.png
new file mode 100644
index 0000000..f882359
Binary files /dev/null and b/src/assets/zhsdy/组 3144.png differ
diff --git a/src/assets/zhsdy/组 3144@2x.png b/src/assets/zhsdy/组 3144@2x.png
new file mode 100644
index 0000000..f3c1130
Binary files /dev/null and b/src/assets/zhsdy/组 3144@2x.png differ
diff --git a/src/assets/zhsdy/组 3147.png b/src/assets/zhsdy/组 3147.png
new file mode 100644
index 0000000..ffa0771
Binary files /dev/null and b/src/assets/zhsdy/组 3147.png differ
diff --git a/src/assets/zhsdy/组 3147@2x.png b/src/assets/zhsdy/组 3147@2x.png
new file mode 100644
index 0000000..11d955b
Binary files /dev/null and b/src/assets/zhsdy/组 3147@2x.png differ
diff --git a/src/assets/zhsdy/组 3168.png b/src/assets/zhsdy/组 3168.png
new file mode 100644
index 0000000..2ab5c32
Binary files /dev/null and b/src/assets/zhsdy/组 3168.png differ
diff --git a/src/assets/zhsdy/组 3168@2x.png b/src/assets/zhsdy/组 3168@2x.png
new file mode 100644
index 0000000..8ec136c
Binary files /dev/null and b/src/assets/zhsdy/组 3168@2x.png differ
diff --git a/src/assets/zhsdy/组 3169.png b/src/assets/zhsdy/组 3169.png
new file mode 100644
index 0000000..b6e9bea
Binary files /dev/null and b/src/assets/zhsdy/组 3169.png differ
diff --git a/src/assets/zhsdy/组 3169@2x.png b/src/assets/zhsdy/组 3169@2x.png
new file mode 100644
index 0000000..7583343
Binary files /dev/null and b/src/assets/zhsdy/组 3169@2x.png differ
diff --git a/src/assets/zhsdy/组 3187.png b/src/assets/zhsdy/组 3187.png
new file mode 100644
index 0000000..4d41509
Binary files /dev/null and b/src/assets/zhsdy/组 3187.png differ
diff --git a/src/assets/zhsdy/组 3187@2x.png b/src/assets/zhsdy/组 3187@2x.png
new file mode 100644
index 0000000..69bfd69
Binary files /dev/null and b/src/assets/zhsdy/组 3187@2x.png differ
diff --git a/src/assets/zhsdy/组 3188.png b/src/assets/zhsdy/组 3188.png
new file mode 100644
index 0000000..d6e40f4
Binary files /dev/null and b/src/assets/zhsdy/组 3188.png differ
diff --git a/src/assets/zhsdy/组 3188@2x.png b/src/assets/zhsdy/组 3188@2x.png
new file mode 100644
index 0000000..69bfd69
Binary files /dev/null and b/src/assets/zhsdy/组 3188@2x.png differ
diff --git a/src/assets/zhsdy/组 3189.png b/src/assets/zhsdy/组 3189.png
new file mode 100644
index 0000000..a46c559
Binary files /dev/null and b/src/assets/zhsdy/组 3189.png differ
diff --git a/src/assets/zhsdy/组 3189@2x.png b/src/assets/zhsdy/组 3189@2x.png
new file mode 100644
index 0000000..bf7e13e
Binary files /dev/null and b/src/assets/zhsdy/组 3189@2x.png differ
diff --git a/src/assets/zhsdy/组 3190.png b/src/assets/zhsdy/组 3190.png
new file mode 100644
index 0000000..027405b
Binary files /dev/null and b/src/assets/zhsdy/组 3190.png differ
diff --git a/src/assets/zhsdy/组 3190@2x.png b/src/assets/zhsdy/组 3190@2x.png
new file mode 100644
index 0000000..bf7e13e
Binary files /dev/null and b/src/assets/zhsdy/组 3190@2x.png differ
diff --git a/src/assets/zhsdy/组 3191.png b/src/assets/zhsdy/组 3191.png
new file mode 100644
index 0000000..b5af5e6
Binary files /dev/null and b/src/assets/zhsdy/组 3191.png differ
diff --git a/src/assets/zhsdy/组 3191@2x.png b/src/assets/zhsdy/组 3191@2x.png
new file mode 100644
index 0000000..8ec136c
Binary files /dev/null and b/src/assets/zhsdy/组 3191@2x.png differ
diff --git a/src/assets/zhsdy/组 3192.png b/src/assets/zhsdy/组 3192.png
new file mode 100644
index 0000000..a5a4746
Binary files /dev/null and b/src/assets/zhsdy/组 3192.png differ
diff --git a/src/assets/zhsdy/组 3192@2x.png b/src/assets/zhsdy/组 3192@2x.png
new file mode 100644
index 0000000..33f83fe
Binary files /dev/null and b/src/assets/zhsdy/组 3192@2x.png differ
diff --git a/src/assets/zhsdy/组 3193.png b/src/assets/zhsdy/组 3193.png
new file mode 100644
index 0000000..d51611d
Binary files /dev/null and b/src/assets/zhsdy/组 3193.png differ
diff --git a/src/assets/zhsdy/组 3193@2x.png b/src/assets/zhsdy/组 3193@2x.png
new file mode 100644
index 0000000..33f83fe
Binary files /dev/null and b/src/assets/zhsdy/组 3193@2x.png differ
diff --git a/src/assets/客户侧总体用能情况分析/Vector.png b/src/assets/客户侧总体用能情况分析/Vector.png
new file mode 100644
index 0000000..9c184d3
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/Vector.png differ
diff --git a/src/assets/客户侧总体用能情况分析/反白稿.png b/src/assets/客户侧总体用能情况分析/反白稿.png
new file mode 100644
index 0000000..91d7e10
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/反白稿.png differ
diff --git a/src/assets/客户侧总体用能情况分析/图层 2.png b/src/assets/客户侧总体用能情况分析/图层 2.png
new file mode 100644
index 0000000..a18408a
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/图层 2.png differ
diff --git a/src/assets/客户侧总体用能情况分析/图标(1).png b/src/assets/客户侧总体用能情况分析/图标(1).png
new file mode 100644
index 0000000..f574d1d
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/图标(1).png differ
diff --git a/src/assets/客户侧总体用能情况分析/图标.png b/src/assets/客户侧总体用能情况分析/图标.png
new file mode 100644
index 0000000..4ab51e1
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/图标.png differ
diff --git a/src/assets/客户侧总体用能情况分析/实时负荷走势-框.png b/src/assets/客户侧总体用能情况分析/实时负荷走势-框.png
new file mode 100644
index 0000000..bd504fc
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/实时负荷走势-框.png differ
diff --git a/src/assets/客户侧总体用能情况分析/底盘.png b/src/assets/客户侧总体用能情况分析/底盘.png
new file mode 100644
index 0000000..677045b
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/底盘.png differ
diff --git a/src/assets/客户侧总体用能情况分析/标题背景.png b/src/assets/客户侧总体用能情况分析/标题背景.png
new file mode 100644
index 0000000..8ad3833
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/标题背景.png differ
diff --git a/src/assets/客户侧总体用能情况分析/用能量-框.png b/src/assets/客户侧总体用能情况分析/用能量-框.png
new file mode 100644
index 0000000..f460863
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/用能量-框.png differ
diff --git a/src/assets/客户侧总体用能情况分析/矩形(1).png b/src/assets/客户侧总体用能情况分析/矩形(1).png
new file mode 100644
index 0000000..eebccf1
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/矩形(1).png differ
diff --git a/src/assets/客户侧总体用能情况分析/矩形(2).png b/src/assets/客户侧总体用能情况分析/矩形(2).png
new file mode 100644
index 0000000..dd20b90
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/矩形(2).png differ
diff --git a/src/assets/客户侧总体用能情况分析/矩形(3).png b/src/assets/客户侧总体用能情况分析/矩形(3).png
new file mode 100644
index 0000000..20e117e
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/矩形(3).png differ
diff --git a/src/assets/客户侧总体用能情况分析/矩形.png b/src/assets/客户侧总体用能情况分析/矩形.png
new file mode 100644
index 0000000..0b2fea3
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/矩形.png differ
diff --git a/src/assets/客户侧总体用能情况分析/立方体.png b/src/assets/客户侧总体用能情况分析/立方体.png
new file mode 100644
index 0000000..527591f
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/立方体.png differ
diff --git a/src/assets/客户侧总体用能情况分析/组 3117.png b/src/assets/客户侧总体用能情况分析/组 3117.png
new file mode 100644
index 0000000..cf30fa7
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/组 3117.png differ
diff --git a/src/assets/客户侧总体用能情况分析/组 3118.png b/src/assets/客户侧总体用能情况分析/组 3118.png
new file mode 100644
index 0000000..cf30fa7
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/组 3118.png differ
diff --git a/src/assets/客户侧总体用能情况分析/组 3119.png b/src/assets/客户侧总体用能情况分析/组 3119.png
new file mode 100644
index 0000000..b385502
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/组 3119.png differ
diff --git a/src/assets/客户侧总体用能情况分析/组 3120.png b/src/assets/客户侧总体用能情况分析/组 3120.png
new file mode 100644
index 0000000..1d134b0
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/组 3120.png differ
diff --git a/src/assets/客户侧总体用能情况分析/组 3121.png b/src/assets/客户侧总体用能情况分析/组 3121.png
new file mode 100644
index 0000000..a00f151
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/组 3121.png differ
diff --git a/src/assets/客户侧总体用能情况分析/组 3123.png b/src/assets/客户侧总体用能情况分析/组 3123.png
new file mode 100644
index 0000000..5bc5ddf
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/组 3123.png differ
diff --git a/src/assets/客户侧总体用能情况分析/组 3124.png b/src/assets/客户侧总体用能情况分析/组 3124.png
new file mode 100644
index 0000000..ae59891
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/组 3124.png differ
diff --git a/src/assets/客户侧总体用能情况分析/组 3125.png b/src/assets/客户侧总体用能情况分析/组 3125.png
new file mode 100644
index 0000000..92bc080
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/组 3125.png differ
diff --git a/src/assets/客户侧总体用能情况分析/组 3144.png b/src/assets/客户侧总体用能情况分析/组 3144.png
new file mode 100644
index 0000000..03ff027
Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/组 3144.png differ
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..be94ecd
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,40 @@
+import Vue from "vue";
+import App from "./App.vue";
+import "./registerServiceWorker";
+import router from "./router";
+import store from "./store";
+import "amfe-flexible";
+// 全局引入Echarts;
+import * as echarts from "echarts";
+// 然后挂载在vue原型上;
+import "echarts-gl";
+Vue.prototype.$echarts = echarts;
+Vue.config.productionTip = false;
+// echarts 页面适配    ====↓↓↓↓↓↓↓↓↓↓========
+// 定义全局指令
+Vue.directive('resize', { // 使用局部注册指令的方式
+  // 指令的名称
+  bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
+    let width = '',
+      height = '';
+
+    function isReize() {
+      const style = document.defaultView.getComputedStyle(el);
+      if (width !== style.width || height !== style.height) {
+        binding.value(); // 关键
+      }
+      width = style.width;
+      height = style.height;
+    }
+    el.__vueSetInterval__ = setInterval(isReize, 300);
+  },
+  unbind(el) {
+    clearInterval(el.__vueSetInterval__);
+  }
+
+})
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount("#app");
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
new file mode 100644
index 0000000..76cede0
--- /dev/null
+++ b/src/registerServiceWorker.js
@@ -0,0 +1,32 @@
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker'
+
+if (process.env.NODE_ENV === 'production') {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready () {
+      console.log(
+        'App is being served from cache by a service worker.\n' +
+        'For more details, visit https://goo.gl/AFskqB'
+      )
+    },
+    registered () {
+      console.log('Service worker has been registered.')
+    },
+    cached () {
+      console.log('Content has been cached for offline use.')
+    },
+    updatefound () {
+      console.log('New content is downloading.')
+    },
+    updated () {
+      console.log('New content is available; please refresh.')
+    },
+    offline () {
+      console.log('No internet connection found. App is running in offline mode.')
+    },
+    error (error) {
+      console.error('Error during service worker registration:', error)
+    }
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..a6425d1
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,29 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("../views/KHC.vue"),
+  },
+  {
+    path: "/tan",
+    name: "tan",
+    component: () => import("../views/TAN.vue"),
+  },
+  {
+    path: "/zhdy",
+    name: "zhdy",
+    component: () => import("../views/ZHDY.vue"),
+  },
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..ceffa8e
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
diff --git a/src/views/KHC.vue b/src/views/KHC.vue
new file mode 100644
index 0000000..ad264d1
--- /dev/null
+++ b/src/views/KHC.vue
@@ -0,0 +1,1545 @@
+<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="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </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>
+          </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="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();
+      });
+    },
+
+    //用户行业占比
+    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: "#fff",
+            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("yhhyzb", option);
+    },
+    //用能分类占比
+    initYnflzb() {
+      let getParametricEquation = function (
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height
+      ) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          },
+        };
+      };
+      // 生成模拟 3D 饼图的配置项
+      let getPie3D = function (pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          console.log(series[i]);
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+        return series;
+      };
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: "楼宇",
+          value: 4256,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#2A71FF",
+          },
+        },
+
+        {
+          name: "工业",
+          value: 2356,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#00EDFE",
+          },
+        },
+        {
+          name: "其他",
+          value: 2018,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "#FEDB4B",
+          },
+        },
+      ];
+      const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+      series.push({
+        name: "pie2d",
+        type: "pie",
+
+        label: {
+          show: false,
+          opacity: 1,
+          fontSize: fontSizeRem(14),
+          lineHeight: 20,
+          textStyle: {
+            fontSize: fontSizeRem(14),
+            color: "#fff",
+          },
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["40%", "60%"],
+        //   center: ["30%", "50%"],
+        center: ["40%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      let data = [
+        {
+          name: "楼宇",
+          value: "30%",
+        },
+        {
+          name: "工业",
+          value: "30%",
+        },
+        {
+          name: "其他",
+          value: "40%",
+        },
+      ];
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          show: true,
+          tooltip: {
+            show: false,
+          },
+          orient: "vertical",
+          data: data,
+          top: "center",
+          itemGap: 14,
+          itemHeight: 8,
+          itemWidth: 17,
+          right: "2%",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(12),
+          },
+          formatter: function (name) {
+            let res = data.filter((v) => v.name === name);
+            res = res[0] || {};
+            let unit = res.unit || "";
+            return name + "    " + res.value + unit;
+          },
+        },
+        animation: false,
+        tooltip: {
+          show: false,
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              return `${params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                }`;
+            }
+          },
+          textStyle: {
+            fontSize: fontSizeRem(14),
+          },
+        },
+        title: {
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: fontSizeRem(22),
+          },
+        },
+        // backgroundColor: "#0E3567",
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+          normal: {
+            show: true,
+            length: 10,
+            length2: 10,
+          },
+        },
+        label: {
+          show: false,
+          // position: "outside",
+          // formatter: "{b} \n{d}%",
+          // textStyle: {
+          //   color: "#fff",
+          //   fontSize: "14px",
+          // },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 0.01,
+          //top: '30%',
+          bottom: "50%",
+          left: "-7%",
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 60,
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("ynflzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ztynqk {
+        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;
+        }
+
+        .typeBox {
+          list-style: none;
+          display: flex;
+          position: absolute;
+          top: 54px;
+
+          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;
+          }
+        }
+
+        .bottom {
+          margin-top: 100px;
+          display: flex;
+          flex-wrap: wrap;
+
+          .bottomBox {
+            display: flex;
+            align-items: center;
+            width: 180px;
+            margin: 10px;
+
+            img {
+              width: 72px;
+              height: 72px;
+            }
+
+            div {
+              p:nth-of-type(1) {
+                width: 120px;
+                margin-bottom: 10px;
+                margin-top: 5px;
+                font-size: 14px;
+                font-family: " AlibabaPuHuiTi";
+                font-weight: 400;
+              }
+
+              span:nth-of-type(1) {
+                font-size: 20px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 700;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 14px;
+                font-family: "AlibabaPuHuiTi";
+                font-weight: 400;
+                margin-left: 6px;
+              }
+            }
+          }
+        }
+      }
+
+      .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;
+          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%;
+
+      .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>
diff --git a/src/views/TAN.vue b/src/views/TAN.vue
new file mode 100644
index 0000000..f69a9a6
--- /dev/null
+++ b/src/views/TAN.vue
@@ -0,0 +1,2145 @@
+<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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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(845 * 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: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        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 = ["#2B4C86", "#86ACCE ","#9CA5B4","#23BAA6", "#459EA2", "#2B7DE4", "#7C7062","#6B7BC0","#294A83"];
+            let echartData = [
+                {
+                    name: "发电行业",
+                    value: "20",
+                },
+                {
+                    name: "石化行业",
+                    value: "20",
+                },
+                {
+                    name: "化工行业",
+                    value: "30",
+                },
+                {
+                    name: "建材行业",
+                    value: "20",
+                }, {
+                    name: "钢铁行业",
+                    value: "20",
+                }, {
+                    name: "有色行业",
+                    value: "20",
+                }, {
+                    name: "造纸行业",
+                    value: "20",
+                },
+                {
+                    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: "20%",
+                    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: 1000,
+        //             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>
+  
\ No newline at end of file
diff --git a/src/views/Two.vue b/src/views/Two.vue
new file mode 100644
index 0000000..b6aacaa
--- /dev/null
+++ b/src/views/Two.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="box">
+    <div class="top">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>客户侧总体用能情况分析</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="container">
+      <div class="left">
+        <div class="ztynqk"></div>
+        <div class="ssfhzs"></div>
+        <div class="ynl"></div>
+      </div>
+      <div class="center">
+        <div class="map"></div>
+        <div class="yhzyfbqk"></div>
+      </div>
+      <div class="right">
+        <div class="yhhyzb"></div>
+        <div class="ynflzb"></div>
+        <div class="qyydlpm"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script></script>
+<style lang="less" scoped>
+.top {
+  background-color: red;
+  height: 7vh;
+  width: 100%;
+  background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+  background-position: center center;
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  background-repeat: no-repeat;
+  justify-content: space-between;
+
+  p {
+    font-size: 4vh;
+    font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+    font-weight: 600;
+    line-height: 4vh;
+    color: #fff;
+    margin-right: 3vw;
+  }
+  img:nth-of-type(1) {
+    width: 12vw;
+    height: 5.4vh;
+  }
+  img:nth-of-type(2) {
+    width: 8.2vw;
+    height: 2.5vh;
+  }
+}
+.container {
+  width: 100%;
+  height: 89vh;
+  //   background-color: yellow;
+  margin-top: 1vh;
+  display: flex;
+  justify-content: space-between;
+  .left,
+  .right {
+    width: 22.7vw;
+    height: 100%;
+    // background-color: aqua;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .center {
+    width: 51.7vw;
+    height: 100%;
+    // background-color: blanchedalmond;
+  }
+  .left {
+    color: #fff;
+    .ztynqk {
+      width: 100%;
+      height: 27.3vh;
+      background-color: red;
+      background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+      background-size: cover;
+      background-repeat: no-repeat;
+      position: relative;
+      .title {
+        position: absolute;
+        left: 8.3vw;
+        width: 7.5vw;
+        height: 3.3vh;
+        font-size: 1.7vh;
+        font-family: "Source Han Sans";
+        font-weight: 700;
+        color: rgba(255, 255, 255, 0.87);
+        line-height: 3.3vh;
+      }
+    }
+    .ssfhzs {
+      width: 100%;
+      height: 29.2vh;
+      background-color: yellow;
+    }
+    .ynl {
+      width: 100%;
+      height: 30vh;
+      background-color: blue;
+    }
+  }
+  .right {
+    .yhhyzb {
+      width: 100%;
+      height: 27.2vh;
+      background-color: yellow;
+    }
+    .ynflzb {
+      height: 27.2vh;
+      background-color: red;
+    }
+    .qyydlpm {
+      height: 32.7vh;
+      background-color: aqua;
+    }
+  }
+  .center {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .map {
+      height: 58vh;
+      background-color: red;
+    }
+    .yhzyfbqk {
+      height: 30vh;
+      background-color: yellow;
+    }
+  }
+}
+</style>
diff --git a/src/views/XQDP.vue b/src/views/XQDP.vue
new file mode 100644
index 0000000..3eb7c14
--- /dev/null
+++ b/src/views/XQDP.vue
@@ -0,0 +1,1564 @@
+<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="center">
+                        <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="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>
+import * as echarts from "echarts";
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "总量",
+            tjlist: [
+                {
+                    name: "工业生产",
+                    count: "10",
+                },
+                {
+                    name: "商业楼宇",
+                    count: "22",
+                },
+                {
+                    name: "公共建设",
+                    count: "18",
+                },
+                {
+                    name: "其他",
+                    count: "50",
+                },
+            ],
+            list: [
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+                {
+                    name: "济南综合新能源服务有线公司",
+                    value: "236",
+                },
+            ],
+            option: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                // legend: {
+                //     left: "right",
+                //     data: [
+                //         { icon: "roundRect", name: "昨日" },
+                //         { icon: "roundRect", name: "今日" },
+                //     ],
+                //     textStyle: {
+                //         fontSize: 14,
+                //         fontFamily: "AlibabaPuHuiTi",
+                //         fontWeight: 400,
+                //         color: "rgba(255,255,255,0.8)",
+                //     },
+                // },
+
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨标煤",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: fontSizeRem(10),
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#29F1FA",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#29F1FA",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                ],
+            },
+            option1: {
+                // tooltip: {
+                //   trigger: "axis",
+                //   axisPointer: {
+                //     type: "cross",
+                //     label: {
+                //       backgroundColor: "#6a7985",
+                //     },
+                //   },
+                // },
+                legend: {
+                    left: "right",
+                    data: [
+                        { icon: "circle", name: "2022" },
+                        { icon: "circle", name: "2023" },
+                    ],
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        fontFamily: "AlibabaPuHuiTi",
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                },
+                grid: {
+                    left: "4%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+                        axisLabel: {
+                            show: true,
+                            interval: 0,
+                            textStyle: {
+                                fontSize: fontSizeRem(12),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "单位:万吨",
+                        nameTextStyle: {
+                            color: "#fff",
+                            fontSize: fontSizeRem(14),
+                            padding: 10,
+                        },
+                        axisLabel: {
+                            show: true,
+                            textStyle: {
+                                fontSize: fontSizeRem(14),
+                                fontFamily: "AlibabaPuHuiTi",
+                                fontWeight: 400,
+                                color: "rgba(255,255,255,0.8)",
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "2022",
+                        type: "line",
+                        stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: fontSizeRem(2),
+                            color: "#FDCC00",
+                        },
+                        showSymbol: false,
+                        itemStyle: {
+                            color: "#FDCC00",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 99)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(7, 67, 103)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 402, 231, 134, 190, 230, 120, 240, 360, 400, 397, 360, 300],
+                    },
+                    {
+                        name: "2023",
+                        type: "line",
+                        // stack: "Total",
+                        smooth: true,
+                        lineStyle: {
+                            width: 2,
+                            color: "#1B7EF2",
+                        },
+                        showSymbol: false,
+                        label: {
+                            show: true,
+                            position: "top",
+                        },
+                        itemStyle: {
+                            color: "#1B7EF2",
+                        },
+                        areaStyle: {
+                            opacity: 0.4,
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: "rgb(7, 51, 96)",
+                                },
+                                {
+                                    offset: 1,
+                                    color: "rgb(9, 58, 117)",
+                                },
+                            ]),
+                        },
+                        emphasis: {
+                            focus: "series",
+                        },
+                        data: [220, 302, 181, 234, 210, 290, 150, 120, 160, 200, 221, 200, 175, 120, 150, 180],
+                    },
+                ],
+            },
+        };
+    },
+    methods: {
+        listClass(index) {
+            if (index == 0) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+            } else if (index == 1) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+            } else if (index == 2) {
+                return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+            }
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+
+        //用户行业占比
+        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: "#fff",
+                        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("yhhyzb", option);
+        },
+        //用能分类占比
+        initYnflzb() {
+            let getParametricEquation = function (
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                height
+            ) {
+                // 计算
+                let midRatio = (startRatio + endRatio) / 2;
+
+                let startRadian = startRatio * Math.PI * 2;
+                let endRadian = endRatio * Math.PI * 2;
+                let midRadian = midRatio * Math.PI * 2;
+
+                // 如果只有一个扇形，则不实现选中效果。
+                if (startRatio === 0 && endRatio === 1) {
+                    isSelected = false;
+                }
+
+                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+                k = typeof k !== "undefined" ? k : 1 / 3;
+
+                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+                let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+                let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+                // 计算高亮效果的放大比例（未高亮，则比例为 1）
+                let hoverRate = isHovered ? 1.05 : 1;
+
+                // 返回曲面参数方程
+                return {
+                    u: {
+                        min: -Math.PI,
+                        max: Math.PI * 3,
+                        step: Math.PI / 32,
+                    },
+
+                    v: {
+                        min: 0,
+                        max: Math.PI * 2,
+                        step: Math.PI / 20,
+                    },
+
+                    x: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetX +
+                                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    y: function (u, v) {
+                        if (u < startRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        if (u > endRadian) {
+                            return (
+                                offsetY +
+                                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                            );
+                        }
+                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+                    },
+
+                    z: function (u, v) {
+                        if (u < -Math.PI * 0.5) {
+                            return Math.sin(u);
+                        }
+                        if (u > Math.PI * 2.5) {
+                            return Math.sin(u);
+                        }
+                        return Math.sin(v) > 0 ? 1 * height : -1;
+                    },
+                };
+            };
+            // 生成模拟 3D 饼图的配置项
+            let getPie3D = function (pieData, internalDiameterRatio) {
+                let series = [];
+                let sumValue = 0;
+                let startValue = 0;
+                let endValue = 0;
+                let legendData = [];
+                let k =
+                    typeof internalDiameterRatio !== "undefined"
+                        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+                        : 1 / 3;
+
+                // 为每一个饼图数据，生成一个 series-surface 配置
+                for (let i = 0; i < pieData.length; i++) {
+                    sumValue += pieData[i].value;
+
+                    let seriesItem = {
+                        name:
+                            typeof pieData[i].name === "undefined"
+                                ? `series${i}`
+                                : pieData[i].name,
+                        type: "surface",
+                        parametric: true,
+                        wireframe: {
+                            show: false,
+                        },
+                        pieData: pieData[i],
+                        pieStatus: {
+                            selected: false,
+                            hovered: false,
+                            k: k,
+                        },
+                    };
+
+                    if (typeof pieData[i].itemStyle != "undefined") {
+                        let itemStyle = {};
+
+                        typeof pieData[i].itemStyle.color != "undefined"
+                            ? (itemStyle.color = pieData[i].itemStyle.color)
+                            : null;
+                        typeof pieData[i].itemStyle.opacity != "undefined"
+                            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                            : null;
+
+                        seriesItem.itemStyle = itemStyle;
+                    }
+                    series.push(seriesItem);
+                }
+
+                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+                for (let i = 0; i < series.length; i++) {
+                    endValue = startValue + series[i].pieData.value;
+                    console.log(series[i]);
+                    series[i].pieData.startRatio = startValue / sumValue;
+                    series[i].pieData.endRatio = endValue / sumValue;
+                    series[i].parametricEquation = getParametricEquation(
+                        series[i].pieData.startRatio,
+                        series[i].pieData.endRatio,
+                        false,
+                        false,
+                        k,
+                        series[i].pieData.value
+                    );
+
+                    startValue = endValue;
+
+                    legendData.push(series[i].name);
+                }
+                return series;
+            };
+            // 传入数据生成 option
+            const optionsData = [
+                {
+                    name: "楼宇",
+                    value: 4256,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#2A71FF",
+                    },
+                },
+
+                {
+                    name: "工业",
+                    value: 2356,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#00EDFE",
+                    },
+                },
+                {
+                    name: "其他",
+                    value: 2018,
+                    itemStyle: {
+                        //   opacity: 0.5,
+                        color: "#FEDB4B",
+                    },
+                },
+            ];
+            const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+            series.push({
+                name: "pie2d",
+                type: "pie",
+
+                label: {
+                    show: false,
+                    opacity: 1,
+                    fontSize: fontSizeRem(14),
+                    lineHeight: 20,
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                        color: "#fff",
+                    },
+                },
+                labelLine: {
+                    length: 30,
+                    length2: 30,
+                },
+                startAngle: -30, //起始角度，支持范围[0, 360]。
+                clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+                radius: ["40%", "60%"],
+                //   center: ["30%", "50%"],
+                center: ["40%", "50%"],
+                data: optionsData,
+                itemStyle: {
+                    opacity: 0,
+                },
+            });
+            let data = [
+                {
+                    name: "楼宇",
+                    value: "30%",
+                },
+                {
+                    name: "工业",
+                    value: "30%",
+                },
+                {
+                    name: "其他",
+                    value: "40%",
+                },
+            ];
+            // 准备待返回的配置项，把准备好的 legendData、series 传入。
+            let option = {
+                legend: {
+                    show: true,
+                    tooltip: {
+                        show: false,
+                    },
+                    orient: "vertical",
+                    data: data,
+                    top: "center",
+                    itemGap: 14,
+                    itemHeight: 8,
+                    itemWidth: 17,
+                    right: "2%",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(12),
+                    },
+                    formatter: function (name) {
+                        let res = data.filter((v) => v.name === name);
+                        res = res[0] || {};
+                        let unit = res.unit || "";
+                        return name + "    " + res.value + unit;
+                    },
+                },
+                animation: false,
+                tooltip: {
+                    show: false,
+                    formatter: (params) => {
+                        if (
+                            params.seriesName !== "mouseoutSeries" &&
+                            params.seriesName !== "pie2d"
+                        ) {
+                            return `${params.seriesName
+                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                                }`;
+                        }
+                    },
+                    textStyle: {
+                        fontSize: fontSizeRem(14),
+                    },
+                },
+                title: {
+                    x: "center",
+                    top: "20",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: fontSizeRem(22),
+                    },
+                },
+                // backgroundColor: "#0E3567",
+                labelLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "#7BC0CB",
+                    },
+                    normal: {
+                        show: true,
+                        length: 10,
+                        length2: 10,
+                    },
+                },
+                label: {
+                    show: false,
+                    // position: "outside",
+                    // formatter: "{b} \n{d}%",
+                    // textStyle: {
+                    //   color: "#fff",
+                    //   fontSize: "14px",
+                    // },
+                },
+                xAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                yAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                zAxis3D: {
+                    min: -1,
+                    max: 1,
+                },
+                grid3D: {
+                    show: false,
+                    boxHeight: 0.01,
+                    //top: '30%',
+                    bottom: "50%",
+                    left: "-7%",
+                    // environment: "rgba(255,255,255,0)",
+                    viewControl: {
+                        distance: 180,
+                        alpha: 25,
+                        beta: 60,
+                    },
+                },
+                series: series,
+            };
+            this.defineEcharts("ynflzb", option);
+        },
+    },
+    mounted() {
+        this.defineEcharts("ssfhzs", this.option);
+        this.defineEcharts("ynl", this.option1);
+        this.initYhhyzb();
+        this.initYnflzb();
+
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            // font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .jrtj {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18;
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .center {
+                    width: 217px;
+                    height: 126px;
+                    position: absolute;
+                    left: 110px;
+                    top: 110px;
+                    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;
+                    }
+
+                    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;
+                    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%;
+
+            .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>
+  
\ No newline at end of file
diff --git a/src/views/ZHDY.vue b/src/views/ZHDY.vue
new file mode 100644
index 0000000..2e4e5e8
--- /dev/null
+++ b/src/views/ZHDY.vue
@@ -0,0 +1,1523 @@
+<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>
+                    <p>同比</p>
+                    <p class="tb_percent">12.23% <img src="../assets/zhsdy/325数值上升 (4).png" alt=""></p>
+                </div>
+                <div>
+                    <p>环比</p>
+                </div>
+            </div>
+            <div id="qyyh"></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>
+            </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="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();
+        });
+      },
+  
+      //用户行业占比
+      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: "#fff",
+              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("yhhyzb", option);
+      },
+      //用能分类占比
+      initYnflzb() {
+        let getParametricEquation = function (
+          startRatio,
+          endRatio,
+          isSelected,
+          isHovered,
+          k,
+          height
+        ) {
+          // 计算
+          let midRatio = (startRatio + endRatio) / 2;
+  
+          let startRadian = startRatio * Math.PI * 2;
+          let endRadian = endRatio * Math.PI * 2;
+          let midRadian = midRatio * Math.PI * 2;
+  
+          // 如果只有一个扇形，则不实现选中效果。
+          if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
+          }
+  
+          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+          k = typeof k !== "undefined" ? k : 1 / 3;
+  
+          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  
+          // 计算高亮效果的放大比例（未高亮，则比例为 1）
+          let hoverRate = isHovered ? 1.05 : 1;
+  
+          // 返回曲面参数方程
+          return {
+            u: {
+              min: -Math.PI,
+              max: Math.PI * 3,
+              step: Math.PI / 32,
+            },
+  
+            v: {
+              min: 0,
+              max: Math.PI * 2,
+              step: Math.PI / 20,
+            },
+  
+            x: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetX +
+                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetX +
+                  Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            y: function (u, v) {
+              if (u < startRadian) {
+                return (
+                  offsetY +
+                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              if (u > endRadian) {
+                return (
+                  offsetY +
+                  Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+                );
+              }
+              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+  
+            z: function (u, v) {
+              if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+              }
+              if (u > Math.PI * 2.5) {
+                return Math.sin(u);
+              }
+              return Math.sin(v) > 0 ? 1 * height : -1;
+            },
+          };
+        };
+        // 生成模拟 3D 饼图的配置项
+        let getPie3D = function (pieData, internalDiameterRatio) {
+          let series = [];
+          let sumValue = 0;
+          let startValue = 0;
+          let endValue = 0;
+          let legendData = [];
+          let k =
+            typeof internalDiameterRatio !== "undefined"
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
+  
+          // 为每一个饼图数据，生成一个 series-surface 配置
+          for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+  
+            let seriesItem = {
+              name:
+                typeof pieData[i].name === "undefined"
+                  ? `series${i}`
+                  : pieData[i].name,
+              type: "surface",
+              parametric: true,
+              wireframe: {
+                show: false,
+              },
+              pieData: pieData[i],
+              pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+              },
+            };
+  
+            if (typeof pieData[i].itemStyle != "undefined") {
+              let itemStyle = {};
+  
+              typeof pieData[i].itemStyle.color != "undefined"
+                ? (itemStyle.color = pieData[i].itemStyle.color)
+                : null;
+              typeof pieData[i].itemStyle.opacity != "undefined"
+                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+                : null;
+  
+              seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+          }
+  
+          // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+          for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            console.log(series[i]);
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(
+              series[i].pieData.startRatio,
+              series[i].pieData.endRatio,
+              false,
+              false,
+              k,
+              series[i].pieData.value
+            );
+  
+            startValue = endValue;
+  
+            legendData.push(series[i].name);
+          }
+          return series;
+        };
+        // 传入数据生成 option
+        const optionsData = [
+          {
+            name: "楼宇",
+            value: 4256,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#2A71FF",
+            },
+          },
+  
+          {
+            name: "工业",
+            value: 2356,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#00EDFE",
+            },
+          },
+          {
+            name: "其他",
+            value: 2018,
+            itemStyle: {
+              //   opacity: 0.5,
+              color: "#FEDB4B",
+            },
+          },
+        ];
+        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+        series.push({
+          name: "pie2d",
+          type: "pie",
+  
+          label: {
+            show: false,
+            opacity: 1,
+            fontSize: fontSizeRem(14),
+            lineHeight: 20,
+            textStyle: {
+              fontSize: fontSizeRem(14),
+              color: "#fff",
+            },
+          },
+          labelLine: {
+            length: 30,
+            length2: 30,
+          },
+          startAngle: -30, //起始角度，支持范围[0, 360]。
+          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+          radius: ["40%", "60%"],
+          //   center: ["30%", "50%"],
+          center: ["40%", "50%"],
+          data: optionsData,
+          itemStyle: {
+            opacity: 0,
+          },
+        });
+        let data = [
+          {
+            name: "楼宇",
+            value: "30%",
+          },
+          {
+            name: "工业",
+            value: "30%",
+          },
+          {
+            name: "其他",
+            value: "40%",
+          },
+        ];
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          legend: {
+            show: true,
+            tooltip: {
+              show: false,
+            },
+            orient: "vertical",
+            data: data,
+            top: "center",
+            itemGap: 14,
+            itemHeight: 8,
+            itemWidth: 17,
+            right: "2%",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(12),
+            },
+            formatter: function (name) {
+              let res = data.filter((v) => v.name === name);
+              res = res[0] || {};
+              let unit = res.unit || "";
+              return name + "    " + res.value + unit;
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+            formatter: (params) => {
+              if (
+                params.seriesName !== "mouseoutSeries" &&
+                params.seriesName !== "pie2d"
+              ) {
+                return `${params.seriesName
+                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                  };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+                  }`;
+              }
+            },
+            textStyle: {
+              fontSize: fontSizeRem(14),
+            },
+          },
+          title: {
+            x: "center",
+            top: "20",
+            textStyle: {
+              color: "#fff",
+              fontSize: fontSizeRem(22),
+            },
+          },
+          // backgroundColor: "#0E3567",
+          labelLine: {
+            show: false,
+            lineStyle: {
+              color: "#7BC0CB",
+            },
+            normal: {
+              show: true,
+              length: 10,
+              length2: 10,
+            },
+          },
+          label: {
+            show: false,
+            // position: "outside",
+            // formatter: "{b} \n{d}%",
+            // textStyle: {
+            //   color: "#fff",
+            //   fontSize: "14px",
+            // },
+          },
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          grid3D: {
+            show: false,
+            boxHeight: 0.01,
+            //top: '30%',
+            bottom: "50%",
+            left: "-7%",
+            // environment: "rgba(255,255,255,0)",
+            viewControl: {
+              distance: 180,
+              alpha: 25,
+              beta: 60,
+            },
+          },
+          series: series,
+        };
+        this.defineEcharts("ynflzb", option);
+      },
+    },
+    mounted() {
+      this.defineEcharts("ssfhzs", this.option);
+      this.defineEcharts("ynl", this.option1);
+      this.initYhhyzb();
+      this.initYnflzb();
+  
+      var data = [
+        {
+          name: "南京市",
+          value: 1,
+        },
+        {
+          name: "济南市",
+          value: 2,
+        },
+        {
+          name: "徐州市",
+          value: 3,
+        },
+        {
+          name: "常州市",
+          value: 4,
+        },
+        {
+          name: "苏州市",
+          value: 5,
+        },
+        {
+          name: "南通市",
+          value: 6,
+        },
+        {
+          name: "连云港市",
+          value: 7,
+        },
+        {
+          name: "淮安市",
+          value: 8,
+        },
+        {
+          name: "盐城市",
+          value: 9,
+        },
+        {
+          name: "扬州市",
+          value: 10,
+        },
+        {
+          name: "镇江市",
+          value: 11,
+        },
+        {
+          name: "泰州市",
+          value: 12,
+        },
+        {
+          name: "宿迁市",
+          value: 13,
+        },
+      ];
+      var splitList = [
+        {
+          start: 1,
+          end: 1,
+          label: "济南市",
+          color: "#236da8",
+        },
+        {
+          start: 2,
+          end: 2,
+          label: "无锡市",
+          color: "#2884db",
+        },
+        {
+          start: 3,
+          end: 3,
+          label: "徐州市",
+          color: "#244779",
+        },
+        {
+          start: 4,
+          end: 4,
+          label: "常州市",
+          color: "#246198",
+        },
+        {
+          start: 5,
+          end: 5,
+          label: "苏州市",
+          color: "#2884db",
+        },
+        {
+          start: 6,
+          end: 6,
+          label: "南通市",
+          color: "#2884db",
+        },
+        {
+          start: 7,
+          end: 7,
+          label: "连云港市",
+          color: "#244779",
+        },
+        {
+          start: 8,
+          end: 8,
+          label: "淮安市",
+          color: "#244779",
+        },
+        {
+          start: 9,
+          end: 9,
+          label: "盐城市",
+          color: "#244779",
+        },
+        {
+          start: 10,
+          end: 10,
+          label: "扬州市",
+          color: "#246198",
+        },
+        {
+          start: 11,
+          end: 11,
+          label: "镇江市",
+          color: "#2884db",
+        },
+        {
+          start: 12,
+          end: 12,
+          label: "泰州市",
+          color: "#2884db",
+        },
+        {
+          start: 13,
+          end: 13,
+          label: "宿迁市",
+          color: "#244779",
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+  
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                },
+                name: "山东",
+                type: "map3D",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                label: {
+                  show: true, //是否显示市
+                  textStyle: {
+                    color: "#fff", //文字颜色
+                    fontSize: 12, //文字大小
+                    fontFamily: "微软雅黑",
+                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                  },
+                },
+                itemStyle: {
+                  opacity: 1, // 透明度
+                  borderWidth: 1.5, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                //shading: 'realistic',
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#093099", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 1, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 80, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              },
+            ],
+            dataRange: {
+              show: false,
+              splitList: splitList,
+            },
+            animation: true,
+          };
+          myChart.setOption(option);
+          myChart.on("click", this.chartClick);
+          let chartClick = function (param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            var selectedPro = param.name;
+            if (!cityProper[selectedPro]) {
+              option.series.splice(1);
+              option.legend = null;
+              option.visualMap = null;
+              myChart.setOption(option, true);
+              return;
+            }
+            //获取点击区域数据
+            $.get(cityProper[selectedPro], function (geojson) {
+              echarts.registerMap(selectedPro, geojson);
+              //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+              option.series[0] = {
+                name: "",
+                type: "map",
+                map: selectedPro,
+                boxDepth: 80, //地图倾斜度
+                regionHeight: 5, //地图厚度
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                    },
+                  },
+                },
+                groundplane: {
+                  show: false,
+                },
+                data: data,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "#fff", // 纹理贴图
+                  textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  metalness: 0, // 0材质是非金属 ，1金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 100, // 地图视角 控制初始大小
+                  rotateSensitivity: 1, // 旋转
+                  zoomSensitivity: 1, // 缩放
+                },
+              };
+              myChart.setOption(option);
+            });
+          };
+        }
+      );
+    },
+    beforeDestroy() {
+      //离开页面后，删除屏幕监听，防止监听事件一直存在
+      window.removeEventListener("resize", this.getResize);
+    },
+  };
+  </script>
+  <style scoped lang="less">
+  .box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+  
+    .title {
+      width: 100%;
+      height: 76px;
+      background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+  
+      p {
+        width: 527px;
+        height: 47px;
+        font-size: 44px;
+        font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+        font-weight: 600;
+        line-height: 47px;
+        letter-spacing: 3px;
+        color: #fff;
+        margin-left: -60px;
+      }
+  
+      img:nth-of-type(1) {
+        width: 231px;
+        height: 59px;
+      }
+  
+      img:nth-of-type(2) {
+        width: 158px;
+        height: 28px;
+      }
+    }
+  
+    .containter {
+      width: 100%;
+      height: 967px;
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+  
+      .left {
+        width: 436px;
+        height: 100%;
+  
+        .ztynqk {
+            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;
+          }
+  
+          .typeBox {
+            list-style: none;
+            display: flex;
+            position: absolute;
+            top: 54px;
+  
+            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;
+            }
+          }
+  
+          .bottom {
+            margin-top: 100px;
+            display: flex;
+            flex-wrap: wrap;
+  
+            .bottomBox {
+              display: flex;
+              align-items: center;
+              width: 180px;
+              margin: 10px;
+  
+              img {
+                width: 72px;
+                height: 72px;
+              }
+  
+              div {
+                p:nth-of-type(1) {
+                  width: 120px;
+                  margin-bottom: 10px;
+                  margin-top: 5px;
+                  font-size: 14px;
+                  font-family: " AlibabaPuHuiTi";
+                  font-weight: 400;
+                }
+  
+                span:nth-of-type(1) {
+                  font-size: 20px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 700;
+                }
+  
+                span:nth-of-type(2) {
+                  font-size: 14px;
+                  font-family: "AlibabaPuHuiTi";
+                  font-weight: 400;
+                  margin-left: 6px;
+                }
+              }
+            }
+          }
+        }
+  
+        .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;
+            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%;
+  
+        .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>
+  
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..0aed899
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,4 @@
+const { defineConfig } = require("@vue/cli-service");
+module.exports = defineConfig({
+  transpileDependencies: true,
+});